(1)要求后端过年请假回家,但是需要做导出功能。emmm...还需要对Table形式的每一列的数据进行合计。Demo截图如下(2)Research我做了研究,xlsx是可行的。查看数据支持动态多列表标题。着急上线,只实现了单列表头数据。发现现在前端能做的事情越来越多了。(3)执行步骤1,安装并导入包1)安装包npminstallxlsx2)导入包importXLSXfrom'xlsx'安装和介绍详见上一篇文章https://segmentfault.com/a/11...2.实现代码思路:数据需要重新组装——合并headername和data。此外,表头支持自定义。exportExcel(){functiondownload(json,fileName){consttype='xlsx'//定义导出文件的格式vartmpDown//导出内容vartmpdata=json[0]json.unshift({})varkeyMap=[]//获取keysfor(varkintmpdata){keyMap.push(k)json[0][k]=k}vartmpdata=[]//用于保存转换后的jsonjson.map((v,i)=>keyMap.map((k,j)=>Object.assign({},{v:v[k],position:(j>25?getCharCol(j):String.fromCharCode(65+j))+(i+1)}))).reduce((prev,next)=>prev.concat(next)).forEach((v)=>tmpdata[v.position]={v:v.v})varoutputPos=Object.keys(tmpdata)//设置区域,比如表格从A1到D10vartmpWB={SheetNames:['mySheet'],//保存的表格标题Sheets:{mySheet:Object.assign({},tmpdata,//content{'!ref':outputPos[0]+':'+outputPos[outputPos.length-1]//设置填充区域})}}tmpDown=newBlob([s2ab(XLSX.write(tmpWB,{bookType:(type==undefined?'xlsx':type),bookSST:false,type:'binary'}//这里的数据是用于定义导出格式type))],{type:''})//创建二进制对象并写入转换后的字节流saveAs(tmpDown,fileName)}functionsaveAs(obj,fileName){//导出函数实现vartmpa=document.createElement('a')tmpa.download=文件名||'Download'tmpa.href=URL.createObjectURL(obj)//绑定一个标签tmpa.click()//模拟点击实现下载setTimeout(function(){//延时释放URL.revokeObjectURL(obj)//使用URL.revokeObjectURL()释放这个对象URL},100)}functions2ab(s){//字符串转字符流varbuf=newArrayBuffer(s.length)varview=newUint8Array(buf)for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFFreturnbuf}functiongetCharCol(n){consttemCol=''让s=''letm=0while(n>0){m=n%26+1s=String.fromCharCode(m+64)+sn=(n-m)/26}returns}constjson=this.categorySum.map((item,index)=>{//将json数据的键名替换为导出需要的键名letobj={}if(item.category_name){obj['batchname']=item.category_name}if(item.imageCount){obj['图片总数/sheet']=item.imageCount}returnobj})download(json,'ItemStatistics.xlsx')//导出的文件名}注:我在Vue3中执行以上代码,效果导出到Excel如下:以上参考链接https://github.com/SheetJS/sh...https://segmentfault.com/a/11...https://段错误.com/a/11...
