实现原理

该功能原理是将页面转化伟canvas在把canvas转化为base64数据 最后将数据通过pdf.js生成下载，故需要和html2canvas一起使用
友情提醒这个pdf下载不能在app里直接使用，ios里面变成在线预览功能;

window.scrollTo(0, 0);  
        const element = document.querySelector(\'#showContent\')  ;// 这个dom元素是要导出pdf的div容器
        setTimeout(() => {  
          html2canvas(element, {  
            height: this.$refs.footer.offsetTop,
            useCORS: true // 如果说所生成的页面中带有跨域的图片，这个useCors需要设置为True 否则画布被污染不会显示
          }).then((canvas) => {
            console.log(canvas);
            const contentWidth = canvas.width;
            const contentHeight = canvas.height;
            // 一页pdf显示html页面生成的canvas高度;
            const pdfX = (contentWidth + 10) / 2 * 0.75;
            const pdfY = (contentHeight + 500) / 2 * 0.75;// 500为底部留白
            const imgX = pdfX;
            const imgY = (contentHeight / 2 * 0.75);// 内
            const pageData = canvas.toDataURL(\'image/jpeg\', 1.0);
            const pdf = new JsPDF(\'\', \'pt\', [pdfX, pdfY]);
            // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            // 内容未超过pdf一页显示的范围，无需分页
            pdf.addImage(pageData, \'jpeg\', 0, 0, imgX, imgY);
            pdf.save(1234 + \'.pdf\'); // 生成的文件名字

版权声明：本文为wangjiahui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wangjiahui/p/11978053.html