<!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. 集训作业 洛谷P1101 单词方阵

    这个题的长度真的有点长,我直接放图片吧 这个题又是一个和谐的搜索,找到yizhong的y就开始8面搜索,遇见正确的字母就继续搜索,不正确就果断放弃,果然又是一个和谐的搜索呢. #include< ...

  2. P4017 最大食物链计数 (拓扑排序)

    看到拓扑排序感觉非常遥远的复杂,不喜欢图.看了拓扑排序的原理,很像广搜. 以本题样例为例: 了解一下 出度 和 入度 5的出度为3 入度为 0 ,3的出度为2  入度为2…… for循环 找到秃头 5 ...

  3. Atlassian Confluence 5.1.2 破解版部署

    Atlassian Confluence(简称Confluence)是一个专业的wiki程序.它是一个知识管理的工具,通过它可以实现团队成员之间的协作和知识共享.Confluence 不是一个开源软件 ...

  4. [jvm] -- 判断对象是否死亡篇

    判断对象是否死亡的两种方法 引用计数法 给对象中添加一个引用计数器,每当有一个地方引用它,计数器就加 1:当引用失效,计数器就减 1:任何时候计数器为 0 的对象就是不可能再被使用的. 优点: 简单 ...

  5. Redis集群搭建(哨兵)

    最近工作中需要用到redis哨兵集群,笔者自己搭建了3遍,直接开始 环境: 1,系统环境 系统 版本 操作系统 CentOS 7.4 Redis 5.0.8 2,IP请修改成自己的IP redis I ...

  6. xilinx fpga 生成3*3窗口

    在写滤波程序的时候在网上看了好几篇大佬的笔记,都有提到使用3*3窗口,由于小白一个,看到复杂的理论就惧怕的不行.但是现在不得不上,自己调用移位寄存器ip核然后做了个3*3窗口出来,自己动手作出来忽然感 ...

  7. http安全

    https介绍  因为HTTP是明文传输,所以不安全,容易被黑客窃听或窜改: 通信安全必须同时具备机密性.完整性,身份认证和不可否认这四个特性 HTTPS的语法.语义仍然是HTTP,但把下层的协议由T ...

  8. java 方法及引用数据类型

    一.方法 在java中,方法就是用来完成解决某件事情或实现某个功能的办法. 1.语法格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2,......){ 执行语句 ……… re ...

  9. 那些年拿过的shell之springboot jolokia rce

    日穿扫描扫到一个spring boot actuator 可以看到有jolokia这个端点,再看下jolokia/list,存在type=MBeanFactory 关键字 可以使用jolokia-re ...

  10. 11-21 logging 模块

    默认情况下Python的logging模块将日志打印到了标准输出中,且只显示了大于等于WARNING级别的日志, 这说明默认的日志级别设置为WARNING(日志级别等级CRITICAL > ER ...