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

不借助外部插件的话，总结两个方案：

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