1. First introduce htmlToPdf.js in the file
This code introduces html2canvas and jspdf
//需要 npm i html2Canvas 和 npm i jspdf
Here, mount the getPdf function to the Vue prototype, and finally return a promise object (including the resolved base64Pdf for easy processing), and .then can be performed in the local component to upload the backend and other operations.
The plug-in code is as follows
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue) {
/**
* @param {*} reportName 下载时候的标题
* @param {*} isDownload 是否下载默认为下载，传false不下载
*/
Vue.prototype.getPdf = function (reportName, isDownload = true) {
// var target = document.getElementsByClassName("right-aside")[0];
// target.style.background = "#FFFFFF";
return new Promise((resolve, reject) => {
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true,
dpi: window.devicePixelRatio * 4
}).then((canvas) => {
let contentWidth = canvas.width
let contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html页面高度
let leftHeight = contentHeight
//页面偏移
let position = 0
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4',true)
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight,undefined, 'FAST')
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight,undefined, 'FAST')
leftHeight -= pageHeight
position -= 841.89
//避免添加空白页
if (leftHeight > 0) {
PDF.addPage()
}
}
}
if (isDownload) {
PDF.save(reportName + '.pdf')
}
//别的方法：pdf.output("dataurlstring").split("base64,")[1]是base64，
//实际上pdf.output("dataurlstring")就是base64
//const dataurl = `data:application/pdf;base64,${PDF.output('dataurlstring').split('base64,')[1]}`
var pdfData = PDF.output('datauristring')//获取base64Pdf
resolve(pdfData)
}
)
})
}
}
}
2. Next, directly import the code file just now in main.js
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)
3. Use in local components
methods:{
getpdf(){
this.getPdf('六一儿童节快乐', false) //.then得到的值是base64位的pdf文件
.then((res) => {
console.log('base64------',res)
//若有页面跳转，要在then函数里执行，意思就是等pdf文件流生成后再跳走，否则跳走之后，生成pdfbase64字段的函数就获取不到页面DOM了，会报错
}).catch(err => {
console.log('base64------',err)
})
}
}
Remarks: If there is a page jump, it must be inthen functionExecute in , which means to skip after the pdf file stream is generated, otherwise, the function that generates the pdfbase64 field will not be able to get the page DOM and will report an error
Reference link:
1. https://blog.csdn.net/qq_38594056/article/details/118212082
2. https://blog.csdn.net/shidaione/article/details/119715891