文件导出在软件开发中是个比较常用的功能,基本原理也很简单:
- 浏览器向后台发送一个Get请求
- 后台处理程序接收到请求后,经过处理,返回二进制文件流
- 浏览器接收到二进制文件流后提示下载文件
调用的js方法如下 , 通过URL传值的方式Get请求到后台处理程序
function expExcel(){ var url="../function/expExcel?ExportUnit=谨华控股"; window.location.href=url; }
这种方式虽然简单实用,但在有些情况下也不适用。比如只能采用GET方法,传递参数不能太复杂。一般需要在调用的页面创建一个隐藏iframe。。。。。
下面一个angularjs 的一个导出实例
self.excel = function() { var dataUrl = "http://www.order.com/list/excel"; $http({ method: 'post', url: dataUrl, data: {}, transformRequest: function(data) { return $.param(data); }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'arraybuffer' }).success(function(data) { var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); var da = new Date(); var fileName = "数据导出" + da.getFullYear() + '-' + (da.getMonth() + 1) + "-" + da.getDate() + ".xlsx"; self.saveas(blob, fileName); }); }; self.saveas = function(blob, fileName) { if (window.navigator.msSaveOrOpenBlob) { // For IE: navigator.msSaveBlob(blob, fileName); } else { // For other browsers: var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } }
一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。
Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。
var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });