关于vue 导出PDF文件 不被分割的问题 总结

 <el-button
    style="float: right; margin-right: 10px;"
                type="primary"
                size="small"
                :loading="loadingPDF"
                @click="getData"
              >导出pdf</el-button>  // 导出按钮
<div ref="reportHeight" class="heightBox">
    <div id="imgList" ref="report" style="margin-top: 30px">
          <div
            v-for="(item, index) in imgList"
            :key="index"
            class="boxImg item"
          >
            <img ref="" :src="item">
          </div>
    </div>
</div> // 页面的要打印部分

import htmlToPdf from '@/utils/htmlToPdfNew' // js部分引入

 getData() {
      const PDFView = this.$refs.report // 注意这里获取到ref的节点
      const heightBox = this.$refs.reportHeight // 注意这里获取到ref的节点

      const boxDom = document.createElement('div') // 盛放需要打印的div

      boxDom.className = 'boxDom'
      const lableListID = document.getElementsByClassName('item') // 页面上的要打印的图片列表 dom集合
      console.log(lableListID.length, 'lableListID')
      console.log(PDFView, 'PDFView')
      console.log(lableListID, 'lableListID')
      const pageHeight = Math.ceil((PDFView.scrollWidth / 595.28) * 841.89) // 元素的高
      console.log(PDFView.scrollWidth, 'PDFView.scrollWidth') // 360
      console.log(pageHeight, 'pageHeight++++00000')
      // 将要打印的部分循环 如果超出一个PDF的高度 强制设置成pdf的高度
      for (let i = 0; i < lableListID.length; i++) {
        if (lableListID[i].offsetHeight > pageHeight) {
          lableListID[i].style.height = pageHeight + 'px'
          lableListID[i].firstElementChild.style.height =
          lableListID[i].offsetHeight + 'px'
        }
      }

      let height = 0 // 节点的高度
      let boxDom02 = document.createElement('div') // 盛放需要打印的div
      let index = 0
      while (index < lableListID.length) {
        const node = lableListID[index].firstElementChild // 需要打印的list img
        const _H = height + lableListID[index].offsetHeight // 当前节点的高度
        console.log(_H, '_H++')
        if (_H <= pageHeight) { // 如果当前节点高度小等于一页PDF的高度 （即 没有被分割的图片或元素）
          boxDom02.appendChild(node.cloneNode(true)) // 将这个元素放到boxDom02 里面
          height = _H // 节点新高度
          index++ // 循环
        } else { // 如果当前节点高度大于页PDF的高度 （即 该页面会被分割）
          boxDom.appendChild(boxDom02.cloneNode(true)) // 将前面没有被分割的图片放入 要打印的外层节点里面
          height = 0 // 并初始节点的高
          boxDom02 = document.createElement('div') // 然后从新建一个div 循环上面的步骤
        }
      }

      console.log(boxDom, 'boxDom')
      heightBox.appendChild(boxDom) // 添加到页面
      console.log(heightBox, 'heightBox')
      this.getPDF(boxDom) // 将新的要打印的box 传到打印方法 在方法里面去循环生成要打印的每一页

      // this.getPDF(boxDom)
    },

 getPDF(boxDom) {
      htmlToPdf.downloadPDF(boxDom, '凭证pdf')
    
    },

/*
htmlToPdfNew.js 文件的全部代码
 */
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */

async function downloadPDF(ele, pdfName) {
  console.log('进入打印方法+++++')
  const eleW = ele.offsetWidth// 获得该容器的宽
  const eleH = ele.offsetHeight// 获得该容器的高

  const eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
  const eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离

  var canvas = document.createElement('canvas')
  var abs = 0

  const win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
  const win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）

  if (win_out > win_in) {
    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
    abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
    // console.log(a, '新abs');
  }

  canvas.width = eleW * 2 // 将画布宽&&高放大两倍
  canvas.height = eleH * 2

  var context = canvas.getContext('2d')

  context.scale(2, 2)

  context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
  // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
  // translate的时候，要把这个差值去掉

  var pdf = new JsPDF('', 'pt', 'a4')
  console.log(ele, 'eleDom')
  const childrenBox = ele.children
  // console.log(childrenBox, 'childrenBox')
  for (let i = 0; i < childrenBox.length; i++) { // 循环传过来的Dom的字节点 每个子节点打印成一页pdf A4纸那么大
    // pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    const res = await html2canvas(childrenBox[i], {
      dpi: 300,
      // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
      useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
      scale: 1 // 提升导出的文件的分辨率
    })
    var pageData = res.toDataURL('image/jpeg', 1.0)
    var contentWidth = res.width
    var contentHeight = res.height
    var imgWidth = 595.28
    var imgHeight = 595.28 / contentWidth * contentHeight

    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    if (i < childrenBox.length - 1) {
      pdf.addPage() // 避免最后多一个空白页
    }
    // console.log(res, 'res___')
    // console.log(pageData, 'pageData___')
  }

  pdf.save(pdfName)
}

export default {
  downloadPDF
}