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>