问题场景在很多前端项目中，文件下载的需求是很常见的。具体来说，就是通过JS生成文件内容，然后通过浏览器进行下载操作。如图片、Excel等导出功能。前几天在项目中遇到这种需求，将当前网页在浏览器端保存为图片，然后就可以下载了。解决方案网页可以使用html2canvas在这里生成图片。而且它与大多数主流浏览器兼容。Firefox3.5+GoogleChromeOpera12+IE9+Safari6+文件下载第一种解决方案HTML5已经添加了下载属性，只需添加要导出的文件名即可下载。如download="file.jpg"。关于这个属性的更多了解，可以参考传送门张新旭写的一篇博文。简单的代码实现如下：importhtml2canvasfrom'html2canvas';//生成图片并自动下载functioncaptureScreenshot(){constpreview=document.querySelector('.preview-graphs');html2canvas(preview).then((canvas)=??>{varimg=document.createElement('a');img.href=canvas.toDataURL('image/jpeg').replace('image/jpeg','image/octet-stream');//下载文件名img.download=`file.jpg`;img.click();})}注：以上实现，目前只有谷歌浏览器功能正常。兼容性有很大问题。这里的第二种方案可以使用FileSaver.js。需要以Blob的形式保存。canvas提供了创建Blob对象的方法canvas.toBlob((blob)=>{})，但是兼容性堪忧，大部分浏览器都没有实现。所以官网专门提供了这样一个库，canvas-toBlob.js。FileSaver.js是在客户端保存文件的解决方案，非常适合在客户端生成文件的Web应用程序，但是如果文件来自服务器，我们建议您首先尝试使用Content-Disposition附件响应标头，因为它具有更多的跨浏览器兼容性。-摘自官网FileSaver.js是一种在客户端保存文件的解决方案，非常适合在客户端生成文件的web应用，但是如果文件来自服务器，我们建议你先尝试使用Content-处置附件响应头，因为它具有更多的跨浏览器兼容性。兼容主流浏览器，如Firefox、Chrome、Edge、IE10+等。代码实现如下：importhtml2canvasfrom'html2canvas';importFileSaverfrom'file-saver';//这里没有使用Canvas-toBlob.js//base64转Blob函数dataURLToBlob(dataURL){varBASE64_MARKER=';base64,';变种零件；变种内容类型；原始变种；如果(dataURL.indexOf(BASE64_MARKER)===-1){parts=dataURL.split(',');contentType=parts[0].split(':')[1];raw=decodeURIComponent(部分[1]);返回新的Blob([raw],{type:contentType});}parts=dataURL.split(BASE64_MARKER);contentType=parts[0].split(':')[1];raw=window.atob(零件[1]);varrawLength=raw.length;varuInt8Array=newUint8Array(rawLength);for(vari=0;i
