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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章