angularJS实现无刷新文件下载

摘要:
1$scope.getExcel=function(){2$http.post("/production/statistics/export",{3storeId:$scope.$parent.currStore.storeId,4date:$scope.$parent.ledgerDate.getTime()5},{responseType:"blob"}).success(function(d
1 $scope.getExcel = function() {  
2             $http.post("/production/statistics/export", {  
3 storeId: $scope.$parent.currStore.storeId,  
4 date: $scope.$parent.ledgerDate.getTime()  
5             }, {responseType: "blob"}).success(function(data) {  
6                 var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});  
7                 var fileName = $scope.$parent.currStore.name + "_生产统计_" + $scope.$parent.ledgerDate.Format("yyyy-MM-dd");  
8                 var a = document.createElement("a");  
9 document.body.appendChild(a);  
10                 a.download =fileName;  
11                 a.href =URL.createObjectURL(blob);  
12 a.click();  
13 })  
14         }  

并且服务端返回的是二进制数据流.

客户端接收后转换为指定文件格式的blob,最后创建blob对象的URL 把它放在A标签的href上 就会自动下载了

或者

1 $http.post($rootScope.restful_api.last_output_excel,body_data,{responseType: 'arraybuffer'}).success(function(data){
2                 var blob = new Blob([data], {type: "application/vnd.ms-excel"});
3                 var objectUrl =URL.createObjectURL(blob);
4                 var aForExcel = $("<a><span class='forExcel'>下载excel</span></a>").attr("href",objectUrl);
5                 $("body").append(aForExcel);
6                 $(".forExcel").click();
7 aForExcel.remove();
8             })

经验总结:

1.post的方法里要加responseType: 'arraybuffer'参数,不然下载的excel会乱码(这点一开始没注意到,费力好久)

2.使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx

3.使用增加节点调用click方法,而不使用帖子中的window.open(objectUrl)方法,是防止被浏览器当插件屏蔽弹出连接

另外也可以分为两步来做,一是异步请求判断下载是否存在,二是再次调用在后端通过response下载文件。

免责声明:文章转载自《angularJS实现无刷新文件下载》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇OpenCV 2.4.9 学习笔记(1)—— 基本功能结构Verilog -- 无符号整数除法器(一)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS案例之8——从一个数组中随机取数

近期项目中遇到一个需求,从一个列表中随机展示列表的部分内容,需求不大,JS也非常容易实现。主要是运用到了Math对象的random方法,和Array的splice方法。 思路是先新建一个数组,存放所有的列表,然后算出随机数,从数组中取出这个随机索引对应的值,然后组成一个随机数组。 源代码如下: 1 <!DOCTYPE html> 2 <...

了不起的Nodejs学习笔记(前五章)

了不起的Nodejs学习笔记(前五章) 五大部分组成 Node核心设计理念 Node核心模块API Web开发 数据库 测试 一、安装与概念 1、执行文件 Node.js通过node命令来执行Node脚本 创建server.js var http = require('http'); var server = http.createServer(f...

HTML5 FileReader

这里将继续介绍一下FileReader,用FileReader具体地读取文件内容。          NOTE: 在chrome浏览器上本地测试的时候,即以file://xxx这种形式测试本文中的demo,会出现FileReader读取不到内容的情况,表现为 FileReader的result为空或者FileReader根本就没有去读取文件内容,FileR...

ORA-22835 缓冲区对于 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换而言太小

在使用Oralce时,直接取出 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换时,会出现ORA-22835的异常,以下是个人的解决方案 create or replace Function BlobToVarchar (Blob_In In Blob) Return clobIsV_Varchar Varchar2(32767);V_Varch...

Vue(一)

一、es6语法:let和const es6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效 for循环...

用Canvas玩3D:点-线-面

  声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!   玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了。   因为Canvas画布终究还是平面的,所以要有3D就得抽象出一个Z轴。然后再把3D坐标转换成2D坐标,画到画布上,再通过旋转等变换效果来产生3D感。做3D一般就是由点到线,然后由线到面。   【点】...