vue前端导出pdf

function exportDataPdf(el, fileName, splitClassName) {

  // 防止页面数据被切割

  const A4_WIDTH = 595

  const A4_HEIGHT = 842

  el.style.height = 'initial'

  const pageHeight = el.scrollWidth / A4_WIDTH * A4_HEIGHT

  // 获取分割dom，此处为class类名为item的dom

  const domList = document.getElementsByClassName(splitClassName)

  // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割

  let pageNum = 1 // pdf页数

  const eleBounding = el.getBoundingClientRect()

  for (let i = 0; i < domList.length; i++) {

    const node = domList[i]

    const bound = node.getBoundingClientRect()

    const offset2Ele = bound.top - eleBounding.top

    const currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight) // 当前元素应该在哪一页

    if (pageNum < currentPage) {

      pageNum++

      const divParent = domList[i].parentNode // 获取该div的父节点

      const newNode = document.createElement('div')

      newNode.className = 'emptyDiv'

      newNode.style.background = 'white'

      newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 10) + 'px' // +30为了在换下一页时有顶部的边距

      newNode.style.width = '100%'

      divParent.insertBefore(newNode, node) //在每一个节点前面插入一个空的新节点，防止内容被分割截断

    }

  }

  html2canvas(el, {

    allowTaint: true,

  }).then((canvas) => {

    const canvasWidth = canvas.width;

    const canvasHeight = canvas.height;

    // 一页pdf显示html页面生成的canvas高度;a4纸的尺寸[595.28,841.89],pageHeight是应有高度吗，leftHeight是实际高度吗

    const pageHeight = (canvasWidth / 592.28) * 841.89;

    // 未生成pdf的html页面高度

    let leftHeight = canvasHeight;

    // 页面偏移

    let position = 0;

    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

    const imgWidth = 595.28;

    const imgHeight = (595.28 / canvasWidth) * canvasHeight;

    //toDataURL()方法是返回一个包含图片展示的数据URL。

    const pageData = canvas.toDataURL('image/jpeg', 1.0);

    const pdf = new jsPDF("", "pt", "a4");

    if (leftHeight < pageHeight) {

      // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；

      pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

    } else {

      // 分页

      while (leftHeight > 0) {

        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

        leftHeight -= pageHeight;

        position -= 841.89;

        // 避免添加空白页

        if (leftHeight > 0) {

          pdf.addPage();

        }

      }

    }

    // 可动态生成

    pdf.save(`${fileName}.pdf`);

  })

}

 

const ele = document.getElementById('content_page');

 exportDataPdf(ele, "名称", 'el-table__row')