使用react+html2canvas+jspdf实现生成pdf文件

• Z时代
• 2024-01-10
• 分类：综合

导入html2canvas和jspdf插件到项目中

npm install html2canvas

npm install jspdf

引入html2canvas和jspdf到jsx中

import jsPDF from 'jspdf'

import html2canvas from 'html2canvas'

定义一个div和需要生成pdf的页面
<div ; font-size: 16px'></div>

定义一个触发生成报告的按钮
<Button onClick={download}>
生成报告
</Button>

实现download方法
const download = () => {
  let title = 'dfghdfh'
  html2canvas(document.querySelector('#pdfDom'), {
  allowTaint: true
  }).then(function (canvas) {
  let contentWidth = canvas.width
  let contentHeight = canvas.height
  let pageHeight = contentWidth / 592.28 * 841.89
  let leftHeight = contentHeight  
  let position = 0
  let imgWidth = 595.28
  let imgHeight = 592.28 / contentWidth * contentHeight
  let pageData = canvas.toDataURL('image/jpeg', 1.0)
  let PDF = new jsPDF('', 'pt', 'a4')
  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');
    console.log(PDF)
  })
 }

}

以上是 使用react+html2canvas+jspdf实现生成pdf文件 的全部内容， 来源链接： utcz.com/z/381326.html