zoukankan      html  css  js  c++  java
  • 前端下载后端返回的文件流

    不借助外部插件的话,总结两个方案:

    1.使用blob

    1 var elink = document.createElement('a');
    2 elink.download = "成绩导入结果.xls";
    3 elink.style.display = 'none';
    4 var blob = new Blob([data], {type: 'application/vnd.ms-excel'});
    5 
    6 elink.href = URL.createObjectURL(blob);
    7 document.body.appendChild(elink);
    8 elink.click();
    9 document.body.removeChild(elink);

    2.使用fileReader

     1 var blob = new Blob([data], {type: 'application/vnd.ms-excel'});
     2 var downFile = new FileReader()
     3 downFile.readAsDataURL(blob)
     4 downFile.onload = function (e) {
     5 var elink = document.createElement('a');
     6 elink.download = title+"-成绩导入结果.xls";
     7 elink.style.display = 'none';
     8 elink.href = URL.createObjectURL(e);
     9 // elink.href = e.target.result
    10 document.body.appendChild(elink);
    11 elink.click();
    12 document.body.removeChild(elink);
    13 }

    目前实践的结果,第一种可以成功下载,第二种为进入ready,没有下载。但是第一种下载的文件内容是乱码的。

    兼容写法:

     1 function downLoadXls(data, filename) {
     2         //var blob = new Blob([data], {type: 'application/vnd.ms-excel'})接收的是blob,若接收的是文件流,需要转化一下
     3     if (typeof window.chrome !== 'undefined') {
     4         // Chrome version
     5         var link = document.createElement('a');
     6         link.href = window.URL.createObjectURL(data);
     7         link.download = filename;
     8         link.click();
     9     } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
    10         // IE version
    11         var blob = new Blob([data], { type: 'application/force-download' });
    12         window.navigator.msSaveBlob(blob, filename);
    13     } else {
    14         // Firefox version
    15         var file = new File([data], filename, { type: 'application/force-download' });
    16         window.open(URL.createObjectURL(file));
    17     }
    18 }

    乱码考虑解决方案:

    1.后端设置

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

    调试把返回的data改成了上传的文件流,发现下载下来没有乱码,因而考虑是接口返回的数据流格式不对或结构不对,流如下。

    最终解决方法:

    后端返回结果列表,前端进行生成和下载表格文件。

    使用插件xlsjs。

    关键算法:将数据转化为二维矩阵数组结构,然后使用XLSX.utils.aoa_to_sheet将数组转化为sheet表格,然后再转化为blob数据,再使用上边的方法进行下载即可。关键代码如下:

     1 var xlsArr = []
     2                     data.data.forEach(function(e) {
     3                         xlsArr.push([e])
     4                     })
     5 downXls(sheet2blob(XLSX.utils.aoa_to_sheet(xlsArr), title+"-作业成绩导入结果.xls"), title+"-作业成绩导入结果.xls")
    6 function sheet2blob(sheet, sheetName) { 7 sheetName = sheetName || 'sheet1'; 8 var workbook = { 9 SheetNames: [sheetName], 10 Sheets: {} 11 }; 12 workbook.Sheets[sheetName] = sheet; 13 // 生成excel的配置项 14 var wopts = { 15 bookType: 'xlsx', // 要生成的文件类型 16 bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性 17 type: 'binary' 18 }; 19 var wbout = XLSX.write(workbook, wopts); 20 var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"}); 21 // 字符串转ArrayBuffer 22 function s2ab(s) { 23 var buf = new ArrayBuffer(s.length); 24 var view = new Uint8Array(buf); 25 for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; 26 return buf; 27 } 28 return blob; 29 }

    sheet转blob的逻辑,与后台生成表格文件流的逻辑是一致的,都是采用workbook生成文件流,然后前端生成可下载的url,再点击触发,即可下载文件。

    我的git实例收藏地址:

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

    FIGHTING
  • 相关阅读:
    Reverse Linked List(算法)
    Move Zeroes (算法)
    Majority Element (算法)
    apk资源文件解析异常导致无法发编译的几种情况及解决方案
    使用update包更新系统文件的过程
    听鬼哥说故事之安卓学习手册_研究过程记录(未完成...)
    ios arm64
    ios,新浪微博
    ios ,微信分享
    ios,qq分享
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/10485010.html
Copyright © 2011-2022 走看看