解决vue项目中html2canvas.js下载的文字图片清晰度

先了解html2canvas

html2canvas官方说明：
使用html2canvas.js可以直接在浏览器上拍摄网页或其中一部分的“屏幕快照”。屏幕截图基于DOM，因此无法真实表示100%的准确度，因为她无法生成实际的屏幕截图，而是根据页面上的可用信息构建的屏幕截图。
脚本遍历加载页面的DOM，将收集到的所有元素信息用于构建页面的表现形式。就是根据读取到的DOM结构信息，构成一个页面。

局限性和兼容性(IE9+,Firefox3.5+,chrome,safari 6+,Opera12+)

脚本使用的所有图像都必须来源相同，如果canvas页面上有其他元素被跨域内容污染，他们将变成脏值，无法被读取。

html2canvas(element, options)
html2canas(document.body).then(function(){
        document.body.appendChild(canvas)
})

//在项目中有个下载详情，使用html2canvas,发现下载的pdf中的文字模糊不清

<div id ="canvasDetail">
         <form>
              <div>xxxxx</div>
              <div>xxxxx</div>
              <div>xxxxx</div>
        </form>
</div>

封装成组件

import html2canvas from './html2canvas'
import jsPdf from './jspdf.debug';
ecport default {
    install(Vue, options){
        Vue.prototype.getPdf = function(){
            var title = this.htmlTitle;

            let width = dom.innerWidth;
            let height = dom.innerHeight;
            let scale = 2;
            let params = {
                    scale: scale,
                    width: width,
                    height: height,
                    useCORS: true,
                    log: false
            };
            //刚开始是没有scale:2的参数的，这个参数的意思是把设备像素比率，渲染的比例尺度扩大
            html2canvas(dom, params).then(function(canvas){
                var contendWidth = canvas.width;
                var contentHeight = canvas.height;
                //生成pdf的高度,A4纸的宽高： 592.28,841.89
                var pdfPageHeight = contendWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftPageHeight = contentHeight;
                //页面偏移
                var position = 0;
                var imgWidth = 592.28;
                var imgHeight = 592.28/contendWidth*contentHeight;
                var PDF = new jsPdf('','pt','a4');
                var pageData = canvas.toDataURL('image/jpeg', 1.0);
                //当一页内容没超过一个pdf时，不用分页
                if( leftPageHeight < pdfPageHeight){
                    PDF.addImage(pageData, 'jpeg', 0 ,0, imgWidth, imgHeight);
                }else{
                    while(leftPageHeight > 0){
                        PDF.addImage(pageData, 'jpeg', 0 ,position, imgWidth, imgHeight);
                        leftPageHeight -=pdfPageHeight;
                        position -=841.89;
                        //避免空白页
                        if(leftPageHeight >0){
                            PDF.addPage();
                        }
                    }
                }
                PDF.save(title + '.pdf');
            })
        }
    }
}