vue项目使用VUE html2Canvas截取页面内容生成pdf

第一步：先安装 html2canvas 和 jspdf

npm install html2canvas jspdf --save

第二步：到项目package.json中查看是否下载好html2canvas 和 jspdf

第三步：utils文件夹下创建一个html2canvas.js

第四步:内容源码已给大家提供，可直接拿去使用

          -- 最下面的pdf.save里面是生成的文件名，自己可根据对应项目进行修改

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
 
// title:pdf文件名称，target：截取的内容
export function printPdf(title, target) {
  var element = target
  setTimeout(() => {
    html2Canvas(element).then(function(canvas) {
      var contentWidth = canvas.width
      var contentHeight = canvas.height
      // 一页pdf显示html页面生成的canvas高度;
      var pageHeight = contentWidth / 592.28 * 841.89
      // 未生成pdf的html页面高度
      var leftHeight = contentHeight
      // 页面偏移
      var position = 0
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28
      var imgHeight = 592.28 / contentWidth * contentHeight
      var pageData = canvas.toDataURL('image/jpeg', 1.0)
      var pdf = new JsPDF('', 'pt', 'a4')
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需进行分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        // 当内容超过pdf一页显示的高度范围时，进行分页
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      pdf.save(title + '赵同同报表.pdf')  //此处命名可由自己对应项目而写 || 根据自己简单配置那当前页面标题传过来进行命名
    })
  }, 1000)
}

第五步：在对应组件页面中使用引入刚才创建的html2canvas.js

import { printPdf } from '@/utils/html2canvas'

第六步：在要进行截取的最大盒子上进行绑定（可以通过ref || id || class都可以）

// pdf生成
    reportPdf() {
      // 个人业务，获取名字用来当pdf文件名
      let comNameHid="赵同"
      // 抓取要截图的div的class名  也可以使用ref进行获取
      let target = document.getElementsByClassName('pdf')[0]
      // pdf背景色
      target.style.background = '#FFFFFF'
      // 滚动条置顶，避免截图不全，截图是从当前浏览器看的位置开始截取的
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      // pdf工具
      printPdf(comNameHid, target)
    }

效果图：

 成功下载到本地打开后的效果：

 

欢迎大家的指点与修改，源码可直接进行使用；