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

导入html2canvas和jspdf插件到项目中

npm install html2canvas

npm install jspdf

 

引入html2canvas和jspdf到jsx中

import jsPDF from 'jspdf'

import html2canvas from 'html2canvas'

 

定义一个div和需要生成pdf的页面
<div id="demo">
<div style={{marginTop:15}}>
<div>
尊敬的用户：
</div>
<div>
依托本系统管理节能，本月共计发生计划外事件0起，有效介入管控事件0起，累计管控收益0元。
</div>
</div>
</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)
  })
 }

}