vue中使用html2canvas + jspdf 将页面转为pdf

安装依赖

cnpm i html2canvas jspdf

引入

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';

async downReport() {
            const doc = document.getElementById('scan-report');
            // console.log(doc);
            this.$nextTick(() => {
                html2canvas(doc, {
                    allowTaint: false, // 允许污染
                    taintTest: true, // 在渲染前测试图片(没整明白有啥用)
                    useCORS: true,
                }).then(canvas => {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    // 一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    // 未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    // 页面偏移
                    var position = 0;
                    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    // eslint-disable-next-line new-cap
                    var pdf = new jspdf('', 'pt', 'a4');

                    // 有两个高度需区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    // 当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            // 避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    var name = '小程序风险扫描报告.pdf'; // 定义生成的pdf的文件名字
                    pdf.save(name);
                });
            });
        },

注意坑

1. html2canvas 不支持将iframe内容打印出pdf

2. html2canvas 不支持打印svg图片