angular中a标签带请求头下载excel
- 2020 年 8 月 12 日
- 筆記
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css"> <script src="../lib/jquery/jquery.min.js"></script> <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script src="../lib/angular/angular.js"></script> <script> var app = angular.module('app', []); app.controller('myCtrl', function ($scope) { //前提:后台已经将excel设计完成 $scope.download=function(){ var url = 'download/?filename=aaa.txt'; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr.responseType = "blob"; // 返回类型blob xhr.setRequestHeader("tokenId", "your token"); // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑 xhr.onload = function () { // 请求完成 if (this.status === 200) { // 返回200 var blob = this.response; var reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href reader.onload = function (e) { // 转换完成,创建一个a标签用于下载 var a = document.createElement('a'); a.download = '用户信息.xls'; a.href = e.target.result; $("body").append(a); // 修复firefox中无法触发click a.click(); $(a).remove(); } } }; // 发送ajax请求 xhr.send() } }); </script> </head> <body ng-controller="myCtrl"> <div class="container"> </div> </body> </html>