html2Canvas + jspdf 实现下载pdf功能

我是一只快乐的前端小渣渣~~~

领导说这个预览得文本需要导出pdf 给市场部用，能不能搞？你说行就行咯，反正我又不敢顶嘴，我又不敢有意见。。

开搞咯 网上各种找插件，技术不行，插件来凑······

找到最简单得解决方案 html2Canvas + jspdf
我得项目是 ant-design 用react得 所以先：
npm i html2canvas
npm i jspdf
安装好依赖后上代码

 import  html2Canvas from 'html2canvas'
 import  jspdf from 'jsPDF' 


 html2Canvas(dom).then(function (canvas) {        
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            var pageHeight = contentWidth / 592.28 * 841.89;    
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 595.28 / contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            var pdf = new jsPDF('', 'pt', 'a4');

            //放大会清晰一点
            pdf.internal.scaleFactor = 1.33;
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
            } else {
                while (leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 20, position + 40, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -=  841.89;
                    //避免添加空白页
                    if (leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save(`${username}-方案配置.pdf`);
        });

很简单得几句代码，就搞定了，正开心得时候发现下载得pdf 它是模糊得··糊得···得···
开始了漫长得搜索 jsPdf blurry 国外大神一通改源代码，头大
试了很久没用
试着打印一下html2Canvas 导出得base64图片，发现原来生成得图片就已经是模糊得了。
又是一通漫长得搜索 html2Canvas blurry
最后发现官方文档已有解决方案(手动吐血)

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

原来放大就好了 scale: 2,

事情告一段落，先去交差了。皆大欢喜喜喜···但愿