使用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)
  })
 }

}