html页面转pdf

最近公司遇见一个新的需求,将原生html页面一键转换成pdf文件,作为一个小白表示很懵,卡在了第一步,引入插件,下面就记录一下详细步骤,兴许以后还能用得上呢~

1.下载插件

我们需要引入两个插件,html2canvas和jsPdf
如果是原生js写的话可以通过script标签引入

1.1 引入html2canvas html2canvas官网

点击图片中的按钮,右键另存至项目内

1.12引入jsPdf jsPdf官网

方法1: https://www.npmjs.com/package/jspdf ,可以参考这里面的方法,
方法2: https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js 直接进去右键另存至项目 (推荐)

2.引入插件

在你的html页面内引入刚才下载的文件,路径看你放的位置,我是直接放在根目录内的

3 js内使用

重点:如果new jsPDF构造函数时报jspdf is not defiend 或者 jspdf is not a constructor
可以在开发者工具上打印一下window.jspdf 看jsPDF在哪一层,再具体应用
这种就需要这样调用: new jspdf.jsPDF()

导出一整页不分页型:

//在导出按钮上绑定这个函数:
function onDerive(){
    let content=document.getElementById('pdfContent') //获取需要导出的节点
    download(content); //导出函数
}

function download(content) {
    html2canvas(content, {
        allowTaint: true,
        scale: 2 // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
        /**jspdf将html转为pdf一页显示不截断，整体思路：
         * 1. 获取DOM
         * 2. 将DOM转换为canvas
         * 3. 获取canvas的宽度、高度（稍微大一点）
         * 4. 将pdf的宽高设置为canvas的宽高
         * 5. 将canvas转为图片
         * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
         */
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;

        // 将canvas转为base64图片
        const pageData = canvas.toDataURL('image/jpeg', 1.0);

        // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        // 2为上面的scale 缩放了2倍
        const pdfX = (contentWidth + 10) / 2 * 0.75;
        const pdfY = (contentHeight + 500) / 2 * 0.75; // 500为底部留白

        // 设置内容图片的尺寸，img是pt单位
        const imgX = pdfX;
        const imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

        // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
        const PDF = new jspdf.jsPDF('', 'pt', [pdfX, pdfY]); //看看你的jspdf在哪里呀,我看其它教程都是直接var PDF = new jsPDF('', 'pt', [pdfX, pdfY])

        // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
        PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)

        PDF.save('信息.pdf')

    })
}

分页型:

function onDerive() {
//分页,但是可能内容会被截断方案
    html2canvas(document.getElementById('pdfContent')).then(function (canvas) { //获取需要导出的节点
        let SmallPDF = document.getElementById('SmallPDF');
        let content = SmallPDF.appendChild(canvas) //这句代码会将canvas截图生成一个元素节点,不需要可以用css隐藏
         onrendered(content)


    });
}

function onrendered(canvas) {

    const contentWidth = canvas.width;
    const contentHeight = canvas.height;

    //一页pdf显示html页面生成的canvas高度;
    const pageHeight = contentWidth / 592.28 * 841.89;
    //未生成pdf的html页面高度
    let leftHeight = contentHeight;
    //pdf页面偏移
    let position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = 592.28 / contentWidth * contentHeight;

    const pageData = canvas.toDataURL('image/jpeg', 1.0);

    const pdf = new jspdf.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();
            }
        }
    }

    pdf.save('html转pdf测试.pdf');
}

不分页代码来自:https://www.jianshu.com/p/4061bdea2a3e