jsPDF 导出html为pdf内容截断终极解决方案

咱们都知道jsPDF配合html2canvas能够将html转化为canvas，而后将canvas转为图片，最后使用jspdf将图片放到pdf中去，实现前端的pdf下载，很方便。可是咱们在使用过程当中会出现这样的状况，将图片放在一页，若是不超过A4纸大小（主要是高度），就没有问题，可是高度超过了，咱们就必须放多页，可是放多页内容会被无情截断。

咱们要实现的目标：不截断pdf，且内容完整

本人通过研究jspdf以后，整理了将html转为pdf，内容一页显示不截断的思路和代码：

思路

1. 获取DOM
2. 将DOM转换为canvas
3. 获取canvas的宽度、高度（稍微大一点，预览）
4. 将pdf的宽高设置为canvas的宽高（不适用A4纸大小）
5. 将canvas转为图片
6. 实例化jspdf，将内容图片放在pdf中（由于内容宽高和pdf宽高同样，就只须要一页，也防止内容截断问题）

代码

document.querySelector('.download button').onclick = function(e) {
      var content = document.querySelector('.content')
      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宽高同样，就只须要一页，也防止内容截断问题）
         */

        // 获得canvas画布的单位是px 像素单位
        var contentWidth = canvas.width
        var contentHeight = canvas.height

        console.log('contentWidth', contentWidth)
        console.log('contentHeight', contentHeight)
        // 将canvas转为base64图片
        var pageData = canvas.toDataURL('image/jpeg', 1.0)

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

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

        // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
        var PDF = new jsPDF('', 'pt', [pdfX, pdfY])

        // 将内容图片添加到pdf中，由于内容宽高和pdf宽高同样，就只须要一页，位置就是 0,0
        PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
        PDF.save('download.pdf')
      })
    }复制代码