vue 的报告页面，生成pdf，使用html2canvas ， 下载pdf格式文件。多页分页下载

本文主要是介绍vue 的报告页面，生成pdf，使用html2canvas ， 下载pdf格式文件。多页分页下载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 = truethis.showModal(row)this.$nextTick(() => {let element = this.$refs.pdfContentlet options = {dpi: window.devicePixelRatio * 2,scale: 1,backgroundColor: '#ffffff',useCORS: true}setTimeout(() => {html2Canvas(element, options).then((canvas) => {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 595.28 * 841.89let leftHeight = contentHeightlet position = 0let a4Width = 595.28let a4Height = 595.28 / contentWidth * contentHeightlet 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 -= pageHeightposition -= 841.89if(leftHeight > 0) {pdf.addPage()}}}pdf.save('测试第一次' + '视频巡检报告.pdf')})}, 1000)})},}}
</script>

这篇关于vue 的报告页面，生成pdf，使用html2canvas ， 下载pdf格式文件。多页分页下载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---