前端导出图片和pdf样式问题和模糊问题

前端导出图片和pdf样式问题和模糊问题

目前前端比较流行的导出图片插件有
html2canvas 和 dom-to-image等
导出pdf的插件有
jspdf 和 pdfmake等

1）选择dom-to-image和jspdf理由

ps:html导出图片和pdf的方法---1.html先导出为图片，2.再把图片导出为pdf

    之前的项目使用的是html2canvas和后端的wkhtmltopdf工具，没有使用前端的jspdf，但是html2canvas对很多css不支持，比如对文字的拉伸，字间距等不支持，所以为了能把复杂的html导出图片，并使效果达到预期，果断选择了dom-to-image
    后端的wkhtmltopdf也是对css一些样式不支持，所以直接改成使用前端的jspdf，把后端生成pdf全部放到前端来生成。
    但是问题又来了，dom-to-image导出的图片是原尺寸的，这样的话再把图片转成pdf，在pdf文件中总是很模糊，如果用之前的html2canvas导出就没问题，因为html2canvas可以设置导出的图片尺寸。所以为了解决图片到pdf模糊问题，直接修改dom-to-image源码。

2）解决方法

首先导出一张放大4倍的图片（scale:4，这个属性是后面加上的），再把图片导出pdf，这样pdf就很清晰了，部分代码如下：

/***引入js***/
<script type="text/javascript" src="xxx/dom-to-image.js"></script>
<script src="xxx/jspdf.debug.js"></script>

/***省略。。。***/
if(type == 'png'){
   
  domtoimage.toJpeg(dom[0], 
  	{
    quality: 1 ,scale:2}).then(function (dataUrl) {
   
        var link = document.createElement(