关于在VUE中使用html2canvas+jspdf方案将HTML页面导出为PDF遇到的坑

关注

原创最新推荐文章于 2026-05-05 10:32:50 发布 4.3k 阅读 AI 写同款· GEO 优化 ›

html2canvas + jsPdf 实现导出pdf(及部分问题解决方案) 再做项目中遇到了需要导出pdf的功能,遇到很多问题包括html2canvas截屏不全,jsPdf导出文字图片不展示-内容错位-背景黑色-jsPdf超过一页被分割等问题,就是把我的解决方案写在这给大家点思路和便利。 1.html2canvas和jsPdf简单介绍一.html2canvas html2canvas官网 npm引入方式 npm insatll --s... 阅读详情

首先网上有很多教程，我就简单记录下，主要是记录我遇到的问题
首先 npm install html2canvas jspdf -s
然后在main.js中引入

// 引入html转pdf的js
import htmlToPdf from './assets/js/htmlToPdf.js'
Vue.use(htmlToPdf)

因为我多个页面要用到导出，所以我使用了一部分公用js，这部分直接写在页面的方法中也当然是可以的

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    install(Vue, options) {
        Vue.prototype.getPdf = function() {
            // 导出之前先将滚动条置顶,不然会出现数据不全的现象
            window.pageYOffset = 0;
            document.documentElement.scrollTop = 0
            document.body.scrollTop = 0

            const loading = this.$loading({
                lock: true,
                text: '导出中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var title = this.htmlTitle
            html2Canvas(document.querySelector('#pdfDom'), {
                allowTaint: true,
                useCORS: true,
            }).then(function(canvas) {
                let contentWidth = canvas.width
                let contentHeight = canvas.height
                let pageHeight = contentWidth / 592.28 * 841.89
                let leftHeight = contentHeight
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight

                let pageData = new Image();
                //设置图片跨域访问
                pageData.setAttribute('crossOrigin', 'Anonymous');

                setTimeout(() => {
                    pageData = canvas.toDataURL('image/jpeg', 1.0);
                    let PDF = new JsPDF('', 'pt', 'a4')
                    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()
                            }
                        }
                    }
                    loading.close();
                    PDF.save(title + '.pdf')
                }, 1000);
            })
        }
    }
}