html2covnas jsPdf 导出pdf

Posted 2021-12-24 Naijiaz

  import html2canvas from \'html2canvas\'
  import JsPDF from \'jspdf\'

　 ....

      exportPdf() 
        this.$nextTick(() => 
          const element = document.getElementById(\'pdf-dom\') // 要打印的区域
          html2canvas(element,  logging: false, useCORS: true ).then(function(canvas) 
            console.log(canvas)
            let pdf = new JsPDF(\'p\', \'mm\', \'a4\') // A4纸,纵向
            console.log(pdf)
            let ctx = canvas.getContext(\'2d\')
            let a4w = 190
            let a4h = 267 // a4大小,216mmx297m 各保留10mm的边距,上下15m,显示区190x257
            let imgHeight = Math.floor((a4h * canvas.width) / a4w)
            let renderedHeight = 0
            let logo = document.getElementById(\'pdf-logo\')
            while (renderedHeight < canvas.height) 
              let page = document.createElement(\'canvas\')
              page.width = canvas.width
              page.height = Math.min(imgHeight, canvas.height - renderedHeight)
              page
                .getContext(\'2d\')
                .putImageData(
                  ctx.getImageData(
                    0,
                    renderedHeight,
                    canvas.width,
                    Math.min(imgHeight, canvas.height - renderedHeight)
                  ),
                  0,
                  0
                )
              pdf.addImage(
                page.toDataURL(\'image/jpeg\', 1.0),
                \'JPEG\',
                10,
                15,
                a4w,
                Math.min(a4h, (a4w * page.height) / page.width)
              )
              pdf.addImage(logo, \'PNG\', 10, 3) // 页眉
              renderedHeight += imgHeight
              if (renderedHeight < canvas.height) pdf.addPage()
            
            pdf.save(\'test.pdf\')
          )
        )
      ,

....