vue导出多页PDF（html2Canvas + jsPdf）（PDF左右边距）

我的另一篇文章写了autoTable+jsPdf生成PDF

参考这里

1、将html转成图片canvas（

       scrollY: refDom.top, // 关键代码，截取长度
        height: refDom.height // 加高度，避免截取不全

）上面两个属性是截取长图的关键

const refDom = this.$refs.htmlDom.getBoundingClientRect()//就是 #pdfDom 这个div

html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        async: true,
        scale: '1', // 放大倍数
        dpi: '192', // 精度，清晰度设置
        scrollY: refDom.top, // 关键代码，截取长度
        height: refDom.height // 加高度，避免截取不全
}).then(canvas => {
   // 将canvas的裁剪到PDF中

})

2、canvas的的宽和A4纸（pageWidth，pageHeight）的宽要一致，缩放canvas ，得到缩放后的canvas的高（imgHeight），canavs的实际高 leftHeight

3、每次裁剪A4纸高度的canvas ，

const pageData = canvas.toDataURL('image/jpeg/png', 1) //html2Canvas获取到的canvas
PDF.addImage(pageData,0,position,pageWidth,imgHeight)
​​​​​​​leftHeight -= pageHeight // 剩余高度
position -= pageWidth

// 新加一页
if (leftHeight > 0) {
    PDF.addPage()
}

完整代码

html

<template>
    <div> 
       <div id="pdfDom" style="border: 1px solid red;width: 1000px;margin: 0 auto;" ref="htmlDom">
<!--自己加内容-->
       </div>

 <button @click="textHtml2Canvas">测试结果img</button>
 </div>
</template>

js

// 生成PDF
    textHtml2Canvas () {
      const refDom = this.$refs.htmlDom.getBoundingClientRect()
      const pageWidth = 595.28 - 40 // A4纸的宽高 减去左右边距
      const pageHeight = 841.89
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        async: true,
        scale: '1', // 放大倍数
        dpi: '192', // 精度
        scrollY: refDom.top, // 关键代码
        height: refDom.height + 50 // 加高度，避免截取不全
      }).then(canvas => {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageData = canvas.toDataURL('image/jpeg/png', 1)
        const PDF = new JsPDF('', 'pt', 'a4') // , true

        // canvas图片的高
        const imgHeight = pageWidth / contentWidth * contentHeight // canvas的宽与PDF的宽比列一样的时候，canvas的高缩放后的值

        let leftHeight = imgHeight 
        let position = 0
        // 如果图片的高小于A4纸的高，不分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 20, 0, pageWidth, imgHeight)
        } else {
          // 分页
          // let index = 0
          while (leftHeight > 0) {
            // console.log(leftHeight, '每一页的高度', imgHeight, index)
            // index++
            // addImage(stream, startX, startY, width, height)
            // stream:图片流
            // (startX,startY)图片的放置的开始点
            
            PDF.addImage(pageData, 'JPEG', 20, position, pageWidth, imgHeight)
            leftHeight = leftHeight - pageHeight
            position -= pageHeight
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save('html变pdf.pdf') // 保存PDF
        return PDF.output('datauristring')
      })
    },

另外，如果要设置上下边距，每次分页的时候，新建一个canvas来承接裁剪的部分，在新的canvas中留出边距。然后将新的canvas传给jsPDF。但是我发现这样做之后，生成的PDF清晰度不够了。

弊端

1、内容会被截断（一行字有时候会被裁成两页显示）

2、如果裁到最后一页的时候，canvas的高只剩下一点点，而且是空白的，就多了一空白页

 

我有一个猜想。可不可以这样

1、按模块区分，当一个模块占了大半张PDF的时候，第二个模块就要另开一页。

2、先生成几张canvas图片，预估他们会不会被分页裁断