前端下載后端返回的文件流

不借助外部插件的話，總結兩個方案：

1.使用blob

var elink = document.createElement('a');
elink.download = "成績導入結果.xls";
elink.style.display = 'none';
var blob = new Blob([data], {type: 'application/vnd.ms-excel'});

elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);

 

2.使用fileReader

var blob = new Blob([data], {type: 'application/vnd.ms-excel'});
var downFile = new FileReader()
downFile.readAsDataURL(blob)
downFile.onload = function (e) {
var elink = document.createElement('a');
elink.download = title+"-成績導入結果.xls";
elink.style.display = 'none';
elink.href = URL.createObjectURL(e);
// elink.href = e.target.result
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
}

目前實踐的結果，第一種可以成功下載，第二種為進入ready，沒有下載。但是第一種下載的文件內容是亂碼的。

兼容寫法：

function downLoadXls(data, filename) {
        //var blob = new Blob([data], {type: 'application/vnd.ms-excel'})接收的是blob，若接收的是文件流，需要轉化一下
    if (typeof window.chrome !== 'undefined') {
        // Chrome version
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(data);
        link.download = filename;
        link.click();
    } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE version
        var blob = new Blob([data], { type: 'application/force-download' });
        window.navigator.msSaveBlob(blob, filename);
    } else {
        // Firefox version
        var file = new File([data], filename, { type: 'application/force-download' });
        window.open(URL.createObjectURL(file));
    }
}

 

亂碼考慮解決方案：

1.后端設置

2.responseType:'blob',{type: 'application/vnd.ms-excel'}等

調試把返回的data改成了上傳的文件流，發現下載下來沒有亂碼，因而考慮是接口返回的數據流格式不對或結構不對，流如下。

最終解決方法：

后端返回結果列表，前端進行生成和下載表格文件。

使用插件xlsjs。

關鍵算法：將數據轉化為二維矩陣數組結構，然后使用XLSX.utils.aoa_to_sheet將數組轉化為sheet表格，然后再轉化為blob數據，再使用上邊的方法進行下載即可。關鍵代碼如下：

var xlsArr = []
                    data.data.forEach(function(e) {
                        xlsArr.push([e])
                    })
downXls(sheet2blob(XLSX.utils.aoa_to_sheet(xlsArr), title+"-作業成績導入結果.xls"), title+"-作業成績導入結果.xls")

function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置項
    var wopts = {
        bookType: 'xlsx', // 要生成的文件類型
        bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
    // 字符串轉ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}

sheet轉blob的邏輯，與后台生成表格文件流的邏輯是一致的，都是采用workbook生成文件流，然后前端生成可下載的url，再點擊觸發，即可下載文件。

我的git實例收藏地址：

https://github.com/MRlijiawei/components/blob/master/xlsJS/html.html