标签：jsPdf canvas html2covnas renderedHeight height let pdf page

  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。