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

首先网上有很多教程，我就简单记录下，主要是记录我遇到的问题
首先 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);
            })
        }
    }
}

 

注释的地方就是我的坑，还好填上了

这部分就是我的代码，用法呢
在页面中将要导出为pdf的部分用 id=”pdfDom”包裹起来，当然，你要写成别的也是可以的，自己看着改改名字就行

然后在你的导出按钮上加上点击事件 @click=getPdf(“这里是你的id名称”)，
然后就可以等待完美的绘制了。

咳咳，下面说说我的问题

1. 图片跨域无法访问绘制的问题

2. 偶尔会发生页面绘制不全，有时候一半，有时候差一点

我的解决办法是：第一个问题，我与后台沟通，对图片的访问加了跨域访问，还有就是给上面的代码中注释部分加了跨域
而第二个我自己找了良久始终不得方法，最后还是同组的老大在网上找到的答案

这个方案绘制页面为图片时，页面滚动条必须在顶部，不然会导致页面绘制图片不全的情况