將頁面的內容導出使用html2canvas+jsPDF

第一首先是要引用

 import jsPDF from 'jspdf'
  import html2canvas from 'html2canvas'
  import PDFJS from 'pdfjs-dist'

  PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'

第二頁面點擊按鈕

第三

 //要導出的div的id
    var target = document.getElementById('export_content1')   
       
        html2canvas(target, { dpi: 172 }).then(function(canvas) {
          console.log(canvas)
          var contentWidth = canvas.width
          var contentHeight = canvas.height

//一頁pdf顯示html頁面生成的canvas高度;
          var pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html頁面高度
          var leftHeight = contentHeight
//pdf頁面偏移
          var position = 0
//html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
          var imgWidth = 595.28
          var imgHeight = 592.28 / contentWidth * contentHeight

          var pageData = canvas.toDataURL('image/jpeg', 1.0)
          var 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('導出.pdf')
        })