前端表格处理你了解多少？

前言在做表格导出功能之前，调用了后台接口，后台生成表格链接供下载。其实前端也可以生成表格供下载。业务场景在很多企业的后台管理中，经常会遇到需要导出页面统计表或者输出打印图表。作为前端处理这样的需求，我可以想到2种方案。一是利用已有的二是利用canvas画图导出。目前很多企业都有大数据的需求，所以不可避免地要对一些表中的数据进行处理。它可以用xlsx/csv处理。csv表格处理最简单的表格处理是csv，在页面中转换表格数据后导出，有一定的局限性，个性化能力弱，可使用XLSX插件处理个性化强的需求.导出csv表格处理导出csv表格处理最重要的是处理单元格中的换行和字符编码问题。letstr=``letcolumns=[tableheadercolumnarray]letdataSource=[tabledataarray]columns.forEach((element)=>{str+=`${tableheadercolumnname},`})/***，表格换行*\r\n单元格换行，双引号""*/dataSource.map((item)=>{str+=`\r\n${linecontent},"${cellcontent}\r\n${cellcontent}\r\n${cellcontent}"`})//encodeURIComponent解决中文乱码leturi='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(str)letlink=document.createElement('a')link.href=urilink.download=`${tablename}.csv`document.body.appendChild(link)link.click()document.body.removeChild(链接)画布图像处理另一种处理方法是画布处理。目前最常用的处理canvas的插件是html2canvas，在前端经常被封装成地图组件。constimageWrapper=需要绘制的HTML标签constclientWidth=imageWrapper.offsetWidthconstclientHeight=imageWrapper.offsetHeightconstkh=[clientWidth,clientHeight]html2canvas(imageWrapper,{useCORS:true,logging:true}).then((canvas)=??>{constdataURL=canvas.toDataURL('image/png')constgetUrlBase64=(url,kh)=>{returnnewPromise((resolve)=>{letcanvas=document.createElement('canvas')constctx=canvas.getContext('2d')constimg=newImage()img.crossOrigin='Anonymous'//允许跨域img.src=urlimg.onload=()=>{canvas.height=kh[1]canvas.width=kh[0]ctx.drawImage(img,0,0,kh[0],kh[1])常量dataURL=canvas.toDataURL('image/png')canvas=nullresolve(dataURL)}})}getUrlBase64(dataURL,kh).then((base64)=>{//下载constlink=document.createElement('a')link.href=base64link.download=`LoanStatement.png`link.click()//打开一个新页面letarr=base64.split(',')//去掉base64格式图片的头部letbstr=atob(arr[1])//atob()方法解码数据letleng=bstr.lengthletu8arr=newUint8Array(leng)while(leng--){u8arr[leng]=bstr.charCodeAt(leng)//返回指定位置字符的Unicode编码}window.open(window.URL.createObjectURL(newFile([u8arr],`${imagename}`,{type:'image/png'})))})})针对大数据表格处理的需求，这种需求主要是针对大量的表格，需要用一些标识批量替换常规数据大数据统计需要。需要识别当前表内容，然后分析替换数据，最后导出，下面是需要手动处理的单体解决方案，有兴趣的可以集成到自动批处理中。利用的是xlsx插件处理导入的数据解析，以及导出constisUTF8(bytes)=>{vari=0while(i{constreader=newFileReader()reader.onload=function(evt){resolve(isUTF8(newUint8Array(evt.target.result)))}reader.readAsArrayBuffer(file)})}letreader=newFileReader()letisCSV=file.name.split('.').pop().toLowerCase()==='csv'if(isCSV){读者。readAsArrayBuffer(file)constisUTF8=await_this.readFileType(file)isUTF8吗？reader.readAsText(file):reader.readAsText(file,'gbk')}else{reader.readAsBinaryString(file)}reader.onload=function(e){让数据=e.target.result让工作簿=XLSX.read(data,{type:'binary'})letsheetNames=workbook.SheetNames//工作表名称的集合letresultData=[]sheetNames.forEach((name)=>{letworksheet=workbook.Sheets[name]//可以只通过工作表名称获取指定的工作表resultData=XLSX.utils.sheet_to_json(worksheet,{header:1})})//然后resultData数据json将需要的数据转换成表格显示}//导出xlxstableconstdata=tabledataletoption={}//option代表excel文件letdataTable=[]//excel文件中的数据内容data.forEach((element)=>{element.author=this.XLSXAuthordeleteelement.regExpMatch})让len=data.lengthif(len){for(leti=0;i(typeofitem==='object'?item.label:item)).join(',')}else{obj[key]=row[key]}}dataTable.push(obj)//设置excel中每一列获取的数据源}}lettableKeys=Object.keys(dataTable[0])option.fileName=localStorage.getItem('XLSXFileName')//excel文件名option.datas=[{sheetData:dataTable,//excel文件中的数据源sheetName:localStorage.getItem('XLSXFileName'),//excel中的sheet页面fileNamesheetFilter:tableKeys,//excel文件中要显示的列数据sheetHeader:tableKeys//excel文件中各列的表头名称}]lettoExcel=newExportJsonExcel(option)//生成excel文件toExcel.saveExcel()//下载excel文件本例是导入xlsx/csv表单，获取表单数据并显示在页面上，然后导出xlsxafter手动修改。如果想深入一点，可以用node写一个转换表单数据的服务这需要通过一些大数据的一些规则抽取来实现。结语这次分享一些工作中遇到的表格的解决办法，一些个人看法，写的不好请轻喷！！！！欢迎一起交流！！！！前端表单处理你了解多少？