VUE导出dom为pdf（html2canvas + jspdf）

提示:

1、html2canvas在苹果手机上导出图片是空白

        canvas有最大面积限制，如果html2canvas导出图片是空白，很有可能是超出了最大面积限制，可以尝试缩小（通常出现在苹果手机上，苹果手机分辨率高）

xxxxxDOM.style.transform = 'scale(0.4)'

对于谷歌浏览器，最大允许的宽度和高度为32,767像素，最大允许面积为268,435,456像素。

2、微信小程序导出页面为pdf或者图片思路（不可直接导出，必须需要后端支持）

        我们通常使用小程序的webview跳转到一个H5网页，在H5网页导出后，把导出的文件传给后端，再回小程序从后端下载，方可实现，我们也试了很多方法都不行。

1、分页效果（硬截断，如果让后端导出可能会好些，node后端可以尝试puppeteer）

2、不分页效果

3、代码

export default (class PdfHandle {
    /**
    * @desc dom元素导出pdf，并按a4分页
    * @param { String } selector
    * @param { String } name 导出文件名
    * **/
    async domToPicPdfPages(selector, name = '导出') {
        let top = document.querySelector(selector);
        if (top != null) {
            top.scrollIntoView();
        }
        const canvas = await html2canvas(top, {allowTaint: true,})
        //下载为PDF文件
        const PDF = new JsPDF("p", "mm", "a4"); // A4纸，纵向   a4可以调整其他尺寸 或者自定义 [210, 297]
        const ctx = canvas.getContext("2d");
        const a4w = 190;
        const a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        const imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
        let renderedHeight = 0;
        while (renderedHeight < canvas.height) {
            const page = document.createElement("canvas");
            page.width = canvas.width;
            page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
            // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
            page.getContext("2d")
                .putImageData(
                    ctx.getImageData(
                        0,
                        renderedHeight,
                        canvas.width,
                        Math.min(imgHeight, canvas.height - renderedHeight)
                    ),
                    0,
                    0
                );
            PDF.addImage(
                page.toDataURL("image/jpeg", 1.0),
                "JPEG",
                10,
                10,
                a4w,
                Math.min(a4h, (a4w * page.height) / page.width)
            );
            renderedHeight += imgHeight;
            if (renderedHeight < canvas.height) {
                PDF.addPage();
            } // 如果后面还有内容，添加一个空页
        }
        const res = await PDF.save(`${name}.pdf`, {returnPromise: true});
    }

    // 不分页
    async domToPicPdfNoPage(selector, name = '导出') {
        let top = document.querySelector(selector);
        if (top != null) {
            top.scrollIntoView();
        }

        // 苹果手机很容易超出最大canvas面积，如果输出为空白可以打开这行代码
        // top.style.transform = 'scale(0.4)'
        const canvas = await html2canvas(top, {
            allowTaint: true,
            useCORS: true
        })
        // top.style.transform = 'scale(1)'
        if(canvas.width * canvas.height > 268435456){
            alert('绘图面积超出最大面积，可能会导致输出失败！')
        }

        // 第一个参数： l：横向  p：纵向
        // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
        let PDF = new JsPDF("p", "pt", [canvas.width + 10, canvas.height + 10]);
        PDF.addImage(
            canvas.toDataURL("image/png"),
            "JPEG",
            10,
            10,
            canvas.width,
            canvas.height,
        )
        const res = await PDF.save(`${name}.pdf`, {returnPromise: true});
        // var pdfData = await PDF.output('dataurlstring')//获取base64Pdf
        // var pdfData = await PDF.output('blob')//blob文件
    }
})()

4、依赖

npm i html2canvas

npm i jspdf