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>