vue将HTML页面转换为PDF格式,并且解决图片跨域问题
首先,我们需要安装两个依赖
npm install --save html2canvas
npm install jspdf --save
第二步,安装完依赖以后,我们需要新建一个目录,当然,这个就很随意了,在哪建立都行,我是在components下建立的一个untils文件
第三步,我们需要将这个文件在main.js里面引入一下,当然,也可以在单个页面引入,就看自己的想法了,这个无所谓
import htmlToPdf from ‘@/components/utils/htmlToPdf’;
Vue.use(htmlToPdf)
第四步,就是在新建的页面写代码了
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), {
useCORS: true,
allowTaint: 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 = 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()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}
第五步,在需要下载的页面进行绑定
<el-button
type="success"
v-on:click="getPdf()"
>下载</el-button
>
getPdf()此方法我们已经在刚才的htmlToPdf.js页面绑定,所以无需再在methods里面写
什么内容需要转化,就给内容最外层绑定pdfDom,请注意,这个id一定要跟上面"htmlToPdf.js"文件中的id必须一致
<div id="pdfDom" style="padding-top: 30px">
data() {
return {
htmlTitle: "xxxx", //这个也是固定写法,pdf文件下载的名称
到这基本就可以了,页面转化就没有问题了,但是有一个最核心的地方,如果你的图片服务器的后台进行了请求头设置,那你转化的时候图片也就没有问题了,如果没有设置,那你就得要求你的后台设置一下,Access-Control-Allow-Origin,至此,vue页面转化为PDF就全部完成
我这是根据此大神的文档进行的加工,感谢!
链接: https://blog.csdn.net/SpringRolls/article/details/108105014.