angular中a标签带请求头下载excel 

<!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>

　　

posted @ 2020-08-12 16:13  sct春天  阅读(592)  评论(0)    收藏  举报