html2covnas jsPdf 导出pdf

  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')
          })
        })
      },

....

标签：jsPdf,canvas,html2covnas,renderedHeight,height,let,pdf,page
来源： https://www.cnblogs.com/b1acklv5/p/15470690.html