文件导出也可以这么写【js+blob】

文件导出在软件开发中是个比较常用的功能，基本原理也很简单：

• 浏览器向后台发送一个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"
        });