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

　　

angular中a标签带请求头下载excel的更多相关文章

  1. Http消息头中常用的请求头和响应头

    作为Web开发对常用http的请求头和响应头熟悉了解一下还是很有必要的.比如请求头中Content-type指定了请求的内容,若类型是application/x-www-form-urlencoded ...

  2. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  3. Vue中axios有关请求头的几点小结

    在Vue前端中向后端发起http请求会有着两种写法:一种是在vue文件中直接导入axios模板,另外一种是使用Vue的属性$http. 1.在第一种方式中,在同一个工程中所添加的vue文件直接使用ax ...

  4. vue 利用axios请求接口下载excel

    一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...

  5. HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头

    http://blog.csdn.net/qxs965266509/article/details/8082810 用于HTTP请求中的常用请求头字段 Accept:用于高速服务器,客户机支持的数据类 ...

  6. XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题

    查看原文 XMLHttpRequest.withCredentials  属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者 ...

  7. Feign 自定义编码器、解码器和客户端,Feign 转发请求头(header参数)、Feign输出Info级别日志

    Feign 的编码器.解码器和客户端都是支持自定义扩展,可以对请求以及结果和发起请求的过程进行自定义实现,Feign 默认支持 JSON 格式的编码器和解码器,如果希望支持其他的或者自定义格式就需要编 ...

  8. 在Angular中，如果权限值是异步请求所得，如何将其设置为HTTP请求头的Authorization?

    遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存token值成为了一个问题.想到的解决方案是,将token值统一存到一个前端程序,其他的前端程序去这个前端程序去取token( ...

  9. http请求头中的Content-Type属性在angular 和 node中的用法

    post请求的请求体有以下两种格式: 1. 字符串: 'name=code_bunny&age=12' 这种格式的请求体,需要配置请求头 'Content-Type':'application ...

随机推荐

  1. 给咱的WP站点搬家

    前言 WordPress 作为全球最流行的博客系统,使用简单,功能丰富,用它来建站的用户非常多.对于站长们来说,网站搬家也是少不了的,有时我们需要更换主机空间,把网站从一个服务器迁移到另一个服务器上, ...

  2. Java中使用断言

    由于断言在Java程序中用于开发和测试阶段,考虑到以后很有可能会用到,在此先记类一下. 在Java语言中,给出了3种处理系统错误的机制: 1.抛出一个异常 2.日志 3.使用断言 什么时候使用断言呢? ...

  3. spring tx——TransactionManger

    TransactionDefinition--事务定义 定义事务属性,包括传播级别.隔离级别.名称.超时.只读等 TransactionStatus--事务状态 事务状态,包含事务对象(jdbc为Da ...

  4. Android Studio报错问题集锦

    Android Studio使用过程中坑太多,动不动就报错,每次出现问题都是上百度去搜索,需要花费很大的时间和精力才能解决掉问题. 为了以后更高效的使用这款工具,在这里记录下来我已经踩过的坑和即将要踩 ...

  5. spring-cloud-alibaba-sentinel和feign配合使用，启动报Caused by: java.lang.AbstractMethodError: com.alibaba.cloud.sentinel.feign.SentinelContractHolder.parseAndValidateMetadata(Ljava/lang/Class;)Ljava/util/List

    背景 我在学习spring-cloud-alibaba技术栈期间,在学习服务熔断与限流的时候,服务启动发生了以下异常 #这是控制台最上面的 sun.misc.Unsafe.park(Native Me ...

  6. ES模糊查询来对应mysql的like查询

    使用ES查询来对应mysql的like查询 建立一个测试索引 PUT /test_like1 { "mappings" : { "properties" : { ...

  7. matplotlib柱状图、面积图、直方图、散点图、极坐标图、箱型图

    一.柱状图 1.通过obj.plot() 柱状图用bar表示,可通过obj.plot(kind='bar')或者obj.plot.bar()生成:在柱状图中添加参数stacked=True,会形成堆叠 ...

  8. Python2.7 PicklingError: Can't pickle <type 'instancemethod'>: attribute lookup __builtin__.instancemethod failed 问题解决

    # 报错信息 PicklingError: Can't pickle <type 'instancemethod'>: attribute lookup __builtin__.insta ...

  9. PDOStatement::fetchObject

    PDOStatement::fetchObject — 获取下一行并作为一个对象返回.(PHP 5 >= 5.1.0, PECL pdo >= 0.2.4)高佣联盟 www.cgewang ...

  10. 51nod 1584 加权约数和 约数和函数小trick 莫比乌斯反演

    LINK:加权约数和 我曾经一度认为莫比乌斯反演都是板子题. 做过这道题我认输了 不是什么东西都是板子. 一个trick 设\(s(x)\)为x的约数和函数. 有 \(s(i\cdot j)=\sum ...