SheetJs前端处理Excel导出

SheetJs前端处理Excel导出

目前使用表格导出时，主要是通过发送请求的后端，然后后端发送文件到前端生成下载文件。这种情况下，会导致占用了一部分资源，如果有多个浏览器端同时导出文件时，就会网络资源的大量使用。

考虑到这种情况下，使用前端导出的方式好处在于只会占用各个浏览器PC的资源生成文件。同时考虑到数据量过大的情况下计算也会相当的频繁，结合WebWorker来处理大量计算的问题。

以下是主页面代码：

 /**
         * @param data 导出数据,一个子数组代表一行 [[1，2，3]，[2,4,5]]
         * @param option {}
         */
        downExcel:function(data=[],option={sheetNames:'sheet'}){
            let worker = new Worker('./page/worker/worker.js');
            let param={};
            param.datas=data;
            Object.assign(param,option);
            worker.postMessage(param);
            worker.onmessage=function (ev){
            let evt=ev.data;
     if(evt.messageType===1){
       XLSX.writeFileSync(evt.data,option.fileName||'导出文件.xlsx');
                }
                worker.terminate();
                if(evt.messageType===0){
                  alert(evt.message);
                }
            };
            worker.onerror=function (e) {
                ui.util.alert('出现错误！');
        
            }
        }

worker.js代码

importScripts('../common/xlsx.full.min.js');
self.onmessage=function (e) {
    const evt=e.data;
    let sheetNames=evt.sheetNames||'sheet';
    let datas=evt.datas;
    let width=dealColWidth(datas['head']);
    if(type(datas)==='Object'){
        datas=dealData(datas);
    }
    // let fileName=evt.fileName||'导出文件.xlsx';
    let workBook=XLSX.utils.book_new();
    if(type(sheetNames)==='Array'){
        sheetNames.forEach((item,index,arrys)=>{
            let workSheet=XLSX.utils.aoa_to_sheet(datas[item]||datas.shift());
            workSheet['!cols']=width;
            workSheet['!rows'] = [{hpx: 25}];
            XLSX.utils.book_append_sheet(workBook,workSheet,item);
        });
    }else if(type(sheetNames)==='String'){
        let workSheet=XLSX.utils.aoa_to_sheet(datas);
        workSheet['!cols']=width;
        workSheet['!rows'] = [{hpx: 20}];
        XLSX.utils.book_append_sheet(workBook,workSheet,sheetNames);
    }else {
        self.postMessage({messageType:0,message:'导出错误！',messageType_mc:'error'});
        return;
    }
    self.postMessage({messageType:1,message:'导出成功！',messageType_mc:'success',data:workBook});
};
function type(u) {
    const y=Object.prototype.toString;
    let str=y.call(u);
    return str.slice(8,str.length-1);
}
//处理数据
function dealData(datas) {
    let re=[];
    ...
    return re;
}
function dealColWidth(head) {
    let re=[];
    for(let key in head){
        re.push({wpx:120});
    }
    return re;
}

附：前端生成文件下载的方式

  window.onload=function(){
        let link=document.createElement('a');
        link.download='hello.txt';
        
        let blob=new Blob(['我是一个下载文件\r\nfsakfhska'],
        {type:'text/plain',endings:'native'});
        
        link.href=URL.createObjectURL(blob);
        link.click();
        URL.revokeObjectURL(link.href);
    }