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

本文链接：https://blog.youkuaiyun.com/Teemo_shape/article/details/137877304

文章介绍了如何在Vue项目中引入html2canvas.js库，实现点击按钮将页面转换为PDF并处理分页功能，最终保存为PDF文件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>