文件導出也可以這麼寫【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"
        });