元素导出为图片与pdf的几种方式

---

原生方法将canvas元素导出为图片

使用原生javascript的方法将canvas元素转为图片并导出有两种方式:canvas.toDataURL()和canvas.toBlob()。
但是在项目中具体使用中发现，这两种方法导出的图片效果都不是很好，有一定的模糊感；尤其是不管canvas元素是啥背景色，canvas.toDataURL ()方法导出的图片只有黑色背景，canvas.toBlob()方法导出的图片只有白色背景，让人无法接受。具体代码如下所示：

使用库将html元素导出为图片：

原生的javascript方法将canvas元素导出为图片的效果一般都不会满足项目的需求，且不支持普通的html其它元素，于是可以借助于开源的第三方库来实现。
将html元素导出为图片可以使用dom-to-image第三方库或者html2canvas第三方库，但是html2canvas库与一些css属性不兼容，所以我一般使用dom-to-image库。
使用此库有几种方法将元素转为图片，每一种方法都可以进行一个很好的图片转换，html元素的背景色是啥颜色转成的图片也是啥背景色，方法如下所示：

但是上面几种方法转成的图片会有一丢丢模糊的感觉，不是特别清晰。当需要将图片进行导出下载时推荐使用dom-to-image.toPng()方法，当转成的图片只需要在页面进行显示不进行导出下载时，推荐使用下面一种方法，将图片的url转为svg路径，这样转化成的图片在页面上展示不会模糊，很清晰，但是不能进行图片下载。代码如下：

使用库将html元素导出为pdf

将元素导出为pdf格式的文档，可以使用jspdf第三方库，但是只使用这一个库还不行，还要结合dom-to-image库或者html2canvas库。
使用步骤很简单，就是先将元素转为图片url,再将此url塞入到一个有大小值的页面中，最后将此页面以pdf的形式导出即可。引用pdf库时，首先要使用new JsPDF()方法生成一个实例，再调用addImage方法生成页面，最后调用save()方法进行pdf导出。具体代码如下所示：