前端导出图片和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('a');
        link.download = 'chart.jpeg';
        link.href = dataUrl;
        link.click();
        $('.hide_label_comment').hide();
     });
}else if(type == 'pdf'){
   domtoimage.toJpeg(dom[0], 
   { quality: 1 ,scale:4}).then(function (dataUrl) {
       var pdf = new jsPDF('', 'px', 'a4');
       pdf.addImage(dataUrl, 'jpeg', 0, 0, width/1.75, height/1.75);
       let rawdata = pdf.output('blob');
       let alink = document.createElement('a');
       alink.href = window.webkitURL.createObjectURL(rawdata);
       alink.target = '_blank';
       alink.download = 'chart.pdf';
       alink.click();
       $('.hide_label_comment').hide();
   });
}

/*
dom-to-image代码
修改draw方法，添加了scale属性
*/
function draw(domNode, options) {
        return toSvg(domNode, options)
            .then(util.makeImage)
            .then(util.delay(100))
            .then(function (image) {
                var canvas = newCanvas(domNode);
                var cc = canvas.getContext('2d');
                if(options.scale){
                    cc.scale(options.scale,options.scale);
                }
                cc.drawImage(image, 0, 0);
                return canvas;
            });

        function newCanvas(domNode) {
            var canvas = document.createElement('canvas');
            var scale = 1;
            if(options.scale){
                scale = options.scale;
            }
            canvas.width = (options.width || util.width(domNode)) * scale;
            canvas.height = (options.height || util.height(domNode)) * scale;

            if (options.bgcolor) {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = options.bgcolor;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }

            return canvas;
        }
    }

这样既能完美的导出html为图片，也能使导出的pdf清晰