VUE html2Canvas截取页面内容生成pdf（直接扒直接用爽的一匹）

先安装 html2canvas 和 jspdf

npm install html2canvas jspdf --save

看看package.json版本啥的

 然后就是干

utils文件夹写个js

内容直接扒（爽的一匹），注意点下上面import的引的插件看看能不能点进node_modules里的插件文件，没有就是没安上，，下面的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 {
        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)
}

页面引工具再写个click方法（方法里行行注释不用讲了吧）

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

// pdf生成
    reportPdf() {
      // 个人业务，获取名字用来当pdf文件名
      var comNameHid = document.getElementById('comNameHid').value
      // 抓取要截图的div的class名
      var 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)
    }

 然后就over，简单的一匹，直接扒直接用，我都扒好几个项目了

标签：canvas,VUE,target,用爽,html2Canvas,leftHeight,var,pdf,页面
来源： https://blog.csdn.net/qq_37241221/article/details/119461147