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

2021-08-06 18:32:50 阅读：295 来源： 互联网

标签：canvas VUE target 用爽 html2Canvas leftHeight var 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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