construct2 导出html打不开,关于在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. 偶尔会发生页面绘制不全，有时候一半，有时候差一点

我的解决办法是：第一个问题，我与后台沟通，对图片的访问加了跨域访问，还有就是给上面的代码中注释部分加了跨域

而第二个我自己找了良久始终不得方法，最后还是同组的老大在网上找到的答案

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