vue将html生成pdf并分页

jspdf + html2canvas

此方案有很多的css兼容问题，比如虚线边框、svg、页数多了内容显示不全、部分浏览器兼容问题，光是解决这些问题就耗费了我不少岁月和精力

后面了解到新的技术方案：

jspdf + html-to-image

javascript 复制代码

npm install --save html-to-image
npm install --save jspdf

原理都是一样，先将html转成图片，再分页生成pdf

区别在于html-to-image可以生成多种格式，并且没有发现html2canvas上的css兼容问题

我这里用的是toCanvas

新建公共js文件

javascript 复制代码

// 导出页面为PDF格式
import JSPDF from "jspdf";
import { toCanvas  } from 'html-to-image'

/***
 * elementName: 需要输出PDF的DOM的id
 */
export const  ExportSavePdf = (elementName,pageTotal) =>{
    var element = document.getElementById(elementName)
    return new Promise((resolve) => {
        toCanvas(element,{ useCORS: true ,allowTaint:true}).then(function(canvas) {
            var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
            var ctx = canvas.getContext("2d")
            ctx.scale(2, 2);
            var a4w = 210;
            var a4h = 297 // A4大小，210mm x 297mm，四边各保留20mm的边距
            var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
            var renderedHeight = 0
            let pageNum = 0;
            while (renderedHeight < canvas.height ) {
                pageNum ++ 
                var 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", 0, 0, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
    
                renderedHeight += imgHeight
                if (renderedHeight < canvas.height && pageNum < pageTotal) { pdf.addPage() } // 如果后面还有内容，添加一个空页
                // delete page;
            }
            //这里可根据自己需求返回不同类型的数据
            resolve(pdf.output('blob'))
        }).catch(function (error) {
            console.error(error)
            resolve(false)
        })
    })
}

在vue页面引入后调用

javascript 复制代码

//pageTotal表示当前pdf的总页数，这个可以在预览的时候计算出来
ExportSavePdf('pdfBox', _this.pageTotal).then((res) => {
                    if (res === false) {
                        this.$message.error('保存失败！');
                        return;
                    }
                    //获取的blob格式数据
                    let pdfBlob = res;
                    //后面是将blob数据上传到oss，这里的可以根据自己需求来
                    getOss({})
                        
                });

当然也有部分兼容问题，下面是我项目中遇到的问题以及我的解决方案：

javascript 复制代码

// 解决兼容问题，在保存之前调用，注意使用$nextTick
        compatibilityProblem() {
            // 去掉所有标签中的包含"v:"的属性
            const elements = Array.from(document.querySelector('#pdfBox').getElementsByTagName('*'));
            for (var i = 0; i < elements.length; i++) {
                var attributes = elements[i].attributes;
                // 遍历当前标签的所有属性
                for (var j = attributes.length - 1; j >= 0; j--) {
                    var attributeName = attributes[j].name;

                    // 如果属性名称中包含 "v:"，则移除该属性
                    if (attributeName.includes('v:')) {
                        elements[i].removeAttribute(attributeName);
                    }
                }
            }
            // 去掉拼音a的宋体样式
            const songSpan = Array.from(document.querySelectorAll('#pdfBox span[style*="font-family:SimSun"]'));
            const aList = ['a', 'ā', 'á', 'ǎ', 'à'];
            const aSpan = songSpan.filter((item) => aList.indexOf(item.innerText) !== -1);
            for (let a of aSpan) {
                a.style.fontFamily = 'inherit';
            }
            // 解决图片跨域问题
            let imgs = Array.from(document.querySelectorAll('#pdfBox img'));
            for (let item of imgs) {
                item.onload = function () {
                    const protocol = window.location.protocol.replace(':', '');
                    if (item.getAttribute('src').split('://').length) {
                        const imgProtocol = item.getAttribute('src').split('://')[0];
                        const src = item.getAttribute('src');
                        if (imgProtocol !== protocol) {
                            item.setAttribute('src', src.replace(imgProtocol, protocol));
                        }
                    }
                    item.setAttribute('crossorigin', 'anonymous');
                };
            }
        },