前端导出pdf使用html2canvas+jsPDF实现分页和不分页

Wed, 17 Nov 2021 06:39:32 +0000

前言
最近在项目中，有一个导出pdf功能，需要纯前端来实现，调研了多种pdf导出方式，最终决定使用html2canvas+jsPDF来实现需求。

本文就简单介绍一下html2canvas+jsPDF导出pdf的实现，网上大部分实现导出pdf都是以分页为主的，本文还将附上不分页导出pdf的实现方法。(只附js代码)

html2canvas+jsPDF导出pdf原理：通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。

安装：
npm install html2canvas --save

npm install jsPDF --save

配置：
main.js文件里面配置（引入、挂载）

import html2canvas from 'html2canvas'
import jsPDF from 'jsPDF '
Vue.prototype.html2canvas = html2canvas
Vue.prototype.jsPDF = jsPDF
或者--------------------------------------------------------------------------------

index.html页面直接引入js文件：

导出pdf按a4纸大小分页处理：// 下载pdf完整方法
downPdf () {
注意：生成的pdf只有页面窗口可见的区域，有滚动条的下面没有生成出来（要注意这里是一个坑）
坑：如果截取是body的这个层级，而刚好body设置了overflow: hidden;那超出的部分是永远截取不到的，因为这个节点的dom高就是窗口可见的高度，并不包含滚动条多出来的部分。
解决办法：只需要在导出之前将overflow:auto设置成visible(默认即可)；
        导出pdf后再设置回去。
　　 // 导出之前将dom的overflow：auto设置成visible
　　 this.$('#boardPdf').css({'overflow-y': 'visible', 'height': 'auto'})
    this.$('#app').css({'overflow-y': 'visible', 'height': 'auto'})
    this.$('body').css({'overflow-y': 'visible', 'height': 'auto'})

    // eslint-disable-next-line
    html2canvas(document.querySelector('#boardPdf'), {
        scale: 2,
        onrendered: function (canvas) {
            var contentWidth = canvas.width
            var contentHeight = canvas.height
            // 一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89
            // 未生成pdf的html页面高度
            var leftHeight = contentHeight
            // pdf页面偏移
            var position = 0
            // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28
            var imgHeight = 592.28 / contentWidth * contentHeight
            var pageData = canvas.toDataURL('image/jpeg', 1.0)
            // eslint-disable-next-line
            var pdf = new 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文件命名
            pdf.save('report_pdf_' + new Date().getTime() + '.pdf')
        },
        background: '#0B1A48'
    })
　　// 导出pdf后，将dom原本的属性设置回去
    this.$('#boardPdf').css({'overflow-y': 'auto', 'height': '100%'})
    this.$('#app').css({'overflow-y': 'auto', 'height': '100%'})
    this.$('body').css({'overflow-y': 'auto', 'height': '100%'})
}

导出pdf自适应大小不分页处理：
// 下载pdf完整方法
downPdf () {
    // 生成的pdf只有页面窗口可见的区域，有滚动条的下面没有生成出来，需在生成PDF前，改overflow属性auto为visible
    this.$('#boardPdf').css({'overflow-y': 'visible', 'height': 'auto'})
    this.$('#app').css({'overflow-y': 'visible', 'height': 'auto'})
    this.$('body').css({'overflow-y': 'visible', 'height': 'auto'})
    // 获取dom高度、宽度
    var shareContent = document.querySelector('#boardPdf')
    var width = shareContent.offsetWidth / 4
    var height = shareContent.offsetHeight / 4
    let _this = this
    // eslint-disable-next-line
    html2canvas(document.querySelector('#boardPdf'), {
        onrendered: function (canvas) {
            var context = canvas.getContext('2d')
            context.mozImageSmoothingEnabled = false
            context.webkitImageSmoothingEnabled = false
            context.msImageSmoothingEnabled = false
            context.imageSmoothingEnabled = false
            var pageData = canvas.toDataURL('image/jpeg', 1.0)
            var img = new Image()
            img.src = pageData
            img.onload = function () {
                // 获取dom高度、宽度
                img.width = img.width / 2
                img.height = img.height / 2
                img.style.transform = 'scale(0.5)'
                if (width > height) {
                    // 此可以根据打印的大小进行自动调节
                    // eslint-disable-next-line
                    var pdf = new jsPDF('l', 'mm', [
                        width * 0.505,
                        height * 0.545
                    ])
                } else {
                    // eslint-disable-next-line
                    var pdf = new jsPDF('p', 'mm', [
                        width * 0.505,
                        height * 0.545
                    ])
                }
                pdf.addImage(
                    pageData,
                    'jpeg',
                    0,
                    0,
                    width * 0.505,
                    height * 0.545
                )
                pdf.save(_this.boardNameTitle + '.pdf')
            }
        },
        background: '#0B1A48'
    })
　　//　导出pdf后，将dom原本属性设置回去
    this.$('#boardPdf').css({'overflow-y': 'auto', 'height': '100%'})
    this.$('#app').css({'overflow-y': 'auto', 'height': '100%'})
    this.$('body').css({'overflow-y': 'auto', 'height': '100%'})
}

[评论] 前端导出pdf使用html2canvas+jsPDF实现分页和不分页

Thu, 01 Jan 1970 00:00:00 +0000

Heck's Blog

前端导出pdf使用html2canvas+jsPDF实现分页和不分页

[评论] 前端导出pdf使用html2canvas+jsPDF实现分页和不分页