vue使用html2canvas和jspdf把页面元素生成pdf文件

最新推荐文章于 2025-06-11 16:34:31 发布

原创最新推荐文章于 2025-06-11 16:34:31 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue把元素生成pdf文件

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用html2canvas和jsPDF将网页内容转换为PDF，包括安装依赖、代码实现及解决内容过长显示不全的问题。

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

1.npm install html2canvas jspdf --save
2.import html2canvas from ‘html2canvas’
import jsPDF from ‘jspdf’
3.使用

html2canvas(document.querySelector('#exportContent')).then(function(canvas) { 
//元素id为exportContent
        var imgData = canvas.toDataURL('image/jpeg')
        console.log(imgData)
        var img = new Image()
        img.src = imgData
        //根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.5是因为比例问题
        img.onload = function () {
          //此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
          var doc=''
          if (this.width > this.height) {
              doc = new jsPDF('l', 'mm', [this.width * 0.5, this.height * 0.5])
          } else {
              doc = new jsPDF('p', 'mm', [this.width * 0.5, this.height * 0.5])
          }
          doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.175, this.height * 0.175)  //比例可根据需要调节
          //根据下载保存成不同的文件名
          doc.save('pdf_' + new Date().getTime() + '.pdf')
        };
      })

备注：
可能遇到的问题：内容过长，会有显示不全的情况。
解决：只能把内容分开，生成多个文件。