html2canvas + jspdf 转换pdf

年关将至，写篇博客压压惊。

---

前言

最近项目中遇到的需求是将html页面导出为pdf的格式，方便在a4纸上打印显示，并且要求分页不会隔断数据显示。 在实现这个功能之前到网上搜了许多相关博客，从中总结了许多思路和方法。大多数博客推荐用html2cavas加pdf实现，但实现的思路都不太一样，一时没找到能直接用的。下面介绍一下我的实现方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、主要思路

主要思路是在html2cavans生成图片之前调整dom的位置，使生成后的图片转换为pdf后显示的内容正好不被分页截断。

tip：之前有在其他博客看到在生成图片数据之后，做修改实现的，具体代码没怎么读懂，试了一下在我的项目里不太好用。

二、实现步骤

1.html 导出 pdf 的基本实现

代码如下（示例）：

function downloadPDF (ele, pdfName) {
    let eleW = ele.offsetWidth// 获得该容器的宽
    let eleH = ele.offsetHeight// 获得该容器的高
    let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
    let canvas = document.createElement('canvas')
    let abs = 0
    let pdHeight = 50
    let winIn = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
    let winOut = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
    if (winOut > winIn) {
        // abs = (win_o - win_i)/2 // 获得滚动条长度的一半
        abs = (winOut - winIn) / 2 // 获得滚动条宽度的一半
    }
    canvas.width = eleW * 2 // 将画布宽&&高放大两倍
    canvas.height = eleH * 2
    const context = canvas.getContext('2d')
    context.scale(2, 2)
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
    html2canvas(ele, {
        dpi: 200,
        // allowTaint: true,  // 允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    }).then((canvas) => {
       const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度
        const pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28
        const imgHeight = 595.28 / contentWidth * contentHeight

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

        const pdf = new JsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            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(pdfName)
    })
}

这是不考虑分页情况下的pdf 转换代码。 百度上一搜一大堆，没什么好说的

2.加入封面

代码如下（示例）：

	const firstPaper = document.querySelector('.first-paper')
    const paperHeight = window.getComputedStyle(firstPaper).minHeight // 获取当前封面容器的高度，这里我是用minHeight属性设置的样式，所以获取minHeight。
    const pHeight = paperHeight
    firstPaper.style.height = 800 * 5 / 4 + 100 + 'px' // pdf 宽高比为4 ：5 得出pdf一页在页面上显示的改的， 800为整个页面的宽度，在这里 我是 写死的 所以直接用了哈，要是根据屏幕大小变化的，动态获取一下就好了

因为动态改变了封面容器的高度，记得在生成pdf以后再将容器的高度改回原来的高度，pHeight 用来记录容器原来的高度。

// 还原高度
firstPaper.style.minHeight = pHeight
firstPaper.style.height = pHeight

这里感觉用 4 / 5 的方式计算高度有些问题，下面换成了 pdf 的实际宽度比上实际高度来算整页的高度。

---

3.处理分页隔断

  
  const list = document.querySelectorAll('.page_re')  // 给每一个要导出为pdf的容器加上page_re  类名。
    let margin = 0  // 存储当前容器需要在下一页显示时，当前容器距离上个容器应设置多少marginTop值
    let pdHeight = 50 // 容器高度的累加值， 因为下面设置了一个margonTop 50px 所以初始高度为50
    const pageHeight = 841.89 / 592.28 * 800    // 当前高度为pageHeight时，在pdf上显示为一页。841.89 为一页pdf的高度， 592.28为一页pdf的宽度， 800 我页面的整体宽度， 这里可以动态获取。
        list[1].style.marginTop = '50px' // 这是封页之后的第一个容器，可能因为上面计算封页高度有问题，导致这里一开始要加50px的marginTop值，不然第一个容器会被封页的分隔截断。
        // i 从1开始， 0 为 封面
        for (let i = 1; i < list.length; i++) {
            const height = parseFloat(window.getComputedStyle(list[i]).height)
            pdHeight += height // 累加每个容器的高度
            // 当容器的高度累加大于pdf一页的高度时，说明这个容器应该放到下一页。
            if (pdHeight > pageHeight) {
                margin = height - pdHeight + pageHeight   // 当前容器的高度减去超出当前pdf页的高度就是当前容器移动到下一页需要的距离
                list[i].style.marginTop = margin + 'px'
                i -= 1    // list[i] 表示当前容器应显示在下一页，所以当下一页计算容器高度累加时应加上list[i]的高度， 这里感觉用while比for好一些
                pdHeight = 10   // 进入下一页重新计算累加高度，这里每个page_re
                元素下的第一个子元素都会有10px的paddingTop，所以初始高度为10 这里也可以动态获取
            }
        }

总结代码

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */
function downloadPDF (ele, pdfName) {
    const firstPaper = document.querySelector('.first-paper')
    const paperHeight = window.getComputedStyle(firstPaper).minHeight
    const pHeight = paperHeight
    firstPaper.style.height = 800 * 5 / 4 + 100 + 'px'
    let eleW = ele.offsetWidth// 获得该容器的宽
    let eleH = ele.offsetHeight// 获得该容器的高
    let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
    let canvas = document.createElement('canvas')
    let abs = 0
    let pdHeight = 50
    let winIn = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
    let winOut = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
    if (winOut > winIn) {
        // abs = (win_o - win_i)/2 // 获得滚动条长度的一半
        abs = (winOut - winIn) / 2 // 获得滚动条宽度的一半
    }
    canvas.width = eleW * 2 // 将画布宽&&高放大两倍
    canvas.height = eleH * 2
    const context = canvas.getContext('2d')
    context.scale(2, 2)
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
    const list = document.querySelectorAll('.page_re')
    let margin = 0
    const pageHeight = 841.89 / 592.28 * 800
        list[1].style.marginTop = '50px'
        for (let i = 1; i < list.length; i++) {
            const height = parseFloat(window.getComputedStyle(list[i]).height)
            pdHeight += height
            if (pdHeight > pageHeight) {
                margin = height - pdHeight + pageHeight
                list[i].style.marginTop = margin + 'px'
                i -= 1
                pdHeight = 10
            }
        }
    html2canvas(ele, {
        dpi: 200,
        // allowTaint: true,  // 允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    }).then((canvas) => {
       const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度
        const pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28
        const imgHeight = 595.28 / contentWidth * contentHeight

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

        const pdf = new JsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            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(pdfName)
        firstPaper.style.minHeight = pHeight
        firstPaper.style.height = pHeight
        for (let i = 0; i < list.length; i++) {
             list[i].style.marginTop = '10px'
        }
    })
}

效果如下：

提示：以上就是今天要讲的内容，由于时间有点紧迫，一些‘硬代码’的地方可以优化。希望可以为大家提供帮助。