导出Excel、PDF和下载图片

创建时间：2020-03-16；测试：chromev80.0.3987.122正常导出Excel（使用xlsx）InstallxlsximportpackageimportXLSXfrom'xlsx/dist/xlsx.mini.min.js';实现原理：将描述表单的JSON按照电子表单的协议转换为压缩的zip字符，再通过一系列方法转换为BlobURL；（相关原理代码如下）functionblobify(strData){varbuf=newArrayBuffer(strData.length),view=newUint8Array(buf);对于(vari=0;i!=strData.length;++i)view[i]=strData.charCodeAt(i)&0xFF;returnbuf;}varexcelBlob=newBlob([blobify(data)],{type:"application/octet-stream"});varblobURL=URL.createObjectURL(excelBlob);相关业务实现代码如下：exportData=()=>{/***@des生成excel*@param{Array}data([[name,score],['hew',80]])*@param{String}name表名*/constfn=(data,name)=>{name=name||'桌子';/**设置文件名和格式，默认xlsx*/constfilename=/\./.test(name)?名称：`${名称}.xlsx`；/**Excel编号工作表名称*/constwsName='sheet';constnewBook=XLSX.utils.book_new();常数tws=XLSX.utils.aoa_to_sheet(数据);/**将数据附加到工作簿*/XLSX.utils.book_append_sheet(newBook,ws,wsName);XLSX.writeFile（新书，文件名）；}fn([['h1','h2','h3','h4'],[1,2,3,4],[true,false,null,5],[true,false,null,'Chinese'],],'table')}ExportPDFimportjspdfandhtml2canvasimport*asjsPDFfrom'jspdf'importhtml2canvasfrom'html2canvas';html2canvas的原理是读取DOM，按照规则在canvas上绘制，但是主要有一些css样式无法实现代码html2canvas(document.querySelector('.need-pdf')).then((canvas)=>{letcanvasWidth=canvas.widthletcanvasHeight=canvas.height//a4纸的尺寸[595.28,841.89]letpageHeight=canvasWidth/592.28*841.89letimgWidth=595.28letimgHeight=592.28/canvasWidth*canvasHeightletpageData=canvas.toDataURL('image/jpeg',1.0)letpdf=newjsPDF('','pt','a4')if(canvasHeight0){//原理是将同一张图片放在不同的页面，但是向上移动不同的距离，实现分页pdf.addImage(pageData,'JPEG',0,y,imgWidth,imgHeight)theRestHeight-=pageHeighty-=841.89if(theRestHeight>0){pdf.addPage()}}}pdf.save('table.pdf')})使用a标签下载图片存在IE兼容问题，必须是同源图片（非同源会在新标签页打开），下载属性值要和图片格式一样下载图片如果放在cdn或图片服务器上（服务器也要设置为允许跨域）constcanvasEle=document.createElement('canvas');constctx=canvasEle.getContext('2d');constimgEle=newImage();imgEle.setAttribute('crossOrigin','匿名');imgEle.onload=function(){canvasEle.width=this.width;canvasEle.height=this.height;ctx.drawImage(this,0,0,this.width,t他的身高）；constaEle=document.createElement('a');aEle.setAttribute('href',canvasEle.toDataURL('image/jpeg'));aEle.setAttribute('下载','cross.jpg');aEle.click();}imgEle.src='xxx.jpg';使用ajax请求，要求同上，但不兼容crossOriginfunctiondl(){varxhr=newXMLHttpRequest();xhr.onload=function(){varurl=URL.createObjectURL(this.response);varimg=新图像（）；img.onload=function(){constaEle=document.createElement('a');aEle.setAttribute('href',canvasEle.toDataURL('image/jpeg'));aEle.setAttribute('下载','cross.jpg');aEle.click();//释放内存URL.revokeObjectURL(url);};img.src=网址；};xhr.open('GET',url,true);xhr.responseType='blob';xhr.send();}欢迎来到Github