1. 新建一个js 文件 , 命名 为 html2canvas.js ,html2canvas 文件和jspdf.min.js 放同一目录下。下载文件已上传啦
2. 在vue 文件中引入html2canvas.js 文件
<script>
import * as html2Canvas from './html2canvas.js'
</script>
3 点击下载,将页面生成pdf页面下载下来,处理分页
<script>
export default {
methods: {
onDownload(row) {
this.toPdf = true
this.showModal(row)
this.$nextTick(() => {
let element = this.$refs.pdfContent
let options = {
dpi: window.devicePixelRatio * 2,
scale: 1,
backgroundColor: '#ffffff',
useCORS: true
}
setTimeout(() => {
html2Canvas(element, options).then((canvas) => {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 595.28 * 841.89
let leftHeight = contentHeight
let position = 0
let a4Width = 595.28
let a4Height = 595.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new jsPDF('', 'pt', 'a4')
if(leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPGE', 0, 0, a4Width, a4Height)
}else{
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPGE', 0, position, a4Width, a4Height)
leftHeight -= pageHeight
position -= 841.89
if(leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save('测试第一次' + '视频巡检报告.pdf')
})
}, 1000)
})
},
}
}
</script>