基于Vue2前端，将网页数据转Excel并导出

首先安装xlsx插件npminstallxlsx插件文档地址xlsx官方文档在组件中引入importXLSXfrom'xlsx'；导出的数据如下//设置面板标题settingPanelTitle:"",col:1,//是否编辑isEdit:true,//表头数据headerData:{"offerData":{name:"项目名称",spec:"规格",unit:"单位",count:"数量",unitPrice:"单价",total:"金额",cardNum:"张数",comments:"备注"},"offerData1":{name:"项目名称1",spec:"规格1",unit:"单位1",count:"数量1",unitPrice:"单价1",total:"数量1",cardNum:"卡片number1",comments:"remark1"}},//表数据allData:{"offerData":[{name:"cabinet1",spec:"sasd",unit:"sadad",count:"5",单价:"145",总计:"",cardNum:5,评论：“大师，大师，价差越来越低”}，{名称：“机柜2”，规格：“sasd”，单位：“sadad”，计数：“10”，单价：“522”，总计：“”,cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"cabinet3",spec:"sasd",unit:"sadad",count:"15",unitPrice:"142"},total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"cabinet4",spec:"sasd",unit:"sadad",count:"20",}unitPrice:"22",total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"cabinet5",spec:"sasd",unit:"sadad",count:"25",单价:"222",总计:"",cardNum:5,评论：“大师，大师，价差越来越低”}，{名称：“机柜6”，规格：“sasd”，单位：“sadad”，计数：“12”，单价：“322”，总计：“”,cardNum:5,comments:"Master,master,spreadmoreandlower"}],"offerData1":[{name:"Border1",spec:"sasd",unit:"sadad",count:"12",unitPrice:"14522",total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"Border2",spec:"sasd",unit:"sadad",count:"12",unitPrice:"14522",total:"",cardNum:5,comments:"Master,Master,springmorelow"},{name:"Border3",spec:"sasd",单位：“sadad”，计数：“12”，单价：“14522”，total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"Border4",spec:"sasd",unit:"sadad",count:"12",unitPrice:"14522",total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"Border5",spec:"sasd",unit:"sadad",count:"12",unitPrice:"14522",total:"",cardNum:5,comments:"Master,master,spreadmoreandlower"},{name:"Border6",spec:"sasd",单位："sadad",count:"12",unitPrice:"14522",total:"",cardNum:5,comments:"Master,master,spreadmore"}]},//页眉部分pageHead:{"offerData":[{名称：“订单号：”，isEdit：false}，{name:"客户姓名：",isEdit:false},{name:"销售日期：",isEdit:false},{name:"联系人：",isEdit:false},{name:"联系地址：",isEdit:false}],"offerData1":[{name:"订单号1:",isEdit:false},{name:"客户名1:",isEdit:false},{name:"销售日期1:",isEdit:false},{name:"联系人1:",isEdit:false},{name:"联系地址1:",isEdit:false}]},//页眉内容pageHeadContent:{"offerData":[{名称：“1231312313”}，{名称：“佐伊”}，{name:"2017-10-21"},{name:"joe"},{name:"beijibng"}],"offerData1":[{name:"2231312313"},{name:"zoe1"},{name:"2017-10-21"},{name:"joe11"},{name:"beijibng111"}]},options:{'offerData':{value:'offerData',label:'报价单'},'offerData1':{value:'offerData1',label:'QuoteDetails1'}},value:'offerData',//selectedtableoutputData:[],//导出数据outFile:'',//Exportfileel在ui层放一个导出按钮和一个标记，模仿导出弹框export{//取出key对应的valuereturnObject.assign({},{//sheetv:v[k],position:(j>25?this.getCharCol(j):String.fromCharCode(65+j))+(i+1)})})}).reduce((prev,next)=>prev.concat(next)).forEach(function(v){tmpdata[v.position]={//转换输出jsonv:v.v}})letoutputPos=Object.keys(tmpdata)//设置区域，比如表格从A1到D10//console.log(outputPos);//转换最长行对应的区号maxLen=this.getCharCol（最大长度）；//console.log(maxLen+outputPos[outputPos.length-1].slice(1));lettmpWB={SheetNames:['mySheet'],//保存的工作表标题Sheets:{'mySheet':Object.assign({},tmpdata,//content{'!ref':outputPos[0]+':'+(maxLen+outputPos[outputPos.length-1].slice(1))//设置填充区域})}}lettmpDown=newBlob([this.s2ab(XLSX.write(tmpWB,{bookType:(type===undefined?'xlsx':type),bookSST:false,type:'binary'}//这里的数据用来定义导出格式type))],{type:''})//创建二进制对象并写入转换后的字节流varhref=URL.createObjectURL(tmpDown)//创建对象超链接this.outFile.download=downName+'.xlsx'//下载名称this.outFile.href=href//绑定一个标签this.outFile.click()//模拟点击实现下载setTimeout(function(){//延迟释放URL.revokeObjectURL(tmpDown)//使用URL.revokeObjectURL()释放This对象URL},100)},//转换为二进制s2ab(s){if(typeofArrayBuffer!=='undefined'){letbuf=newArrayBuffer(s.length);让视图=newUint8Array(buf);for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;返回缓冲区；}别的{letbuf=newArray(s.length);for(vari=0;i!=s.length;++i)buf[i]=s.charCodeAt(i)&0xFF;返回缓冲器；}},//将指定的自然数转换为十六进制表示映射关系：[0-25]->[A-Z]。getCharCol(n){lets=''letm=0while(n>0){m=n%26+1s=String.fromCharCode(m+64)+sn=(n-m)/26}返回s}，实现效果