前端将Html中某一个Dom节点转换为pdf格式文件、前端生成pdf（vue）

前端Html生成PDF

npm install html2canvas -S
npm install jspdf -S

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

htmlToPdf (dom, pdfTitle) {
  let PDF = new JsPDF('', 'pt', 'a4')
  html2Canvas(document.querySelector(dom), {
    allowTaint: true,
    useCORS: true
  })
    .then(function (canvas) {
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      console.log(contentHeight, 'contentHeight')
      let pageHeight = contentWidth / 592.28 * 841.89
      let leftHeight = contentHeight
      let position = 20
      let imgWidth = 595.28
      let imgHeight = 592.28 / contentWidth * contentHeight
      let pageData = canvas.toDataURL('image/jpeg', 1)
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          if (leftHeight > 0) {
            PDF.addPage()
          }
        }
      }
      PDF.save(pdfTitle + ".pdf");
    }
    )
}

测试前端生成pdf文件

//调用
this.htmlToPdf('#pdfTest','测试文件')

js使用window.print()打印某一个Dom节点

直接使用window.print()会调用浏览器的打印，打印内容是整个页面（body）的内容，如果采用生成新元素替换原来body 在替换回去的话会导致原有的事件丢失掉，可以使用新元素遮罩原来的打印完成移除元素。

    printPdf(){
        let newDiv= document.createElement('div')//创建一个新的div
        newDiv.innerHTML = document.getElementById("pdfTest").innerHTML//把要打印的内容放到一个新的div里
        newDiv.style.position = 'fixed'//div宽高设置100%；position设为fixed或者absolute占满屏幕，把当前页面内容全部覆盖住
        newDiv.style.left = '0'
        newDiv.style.top = '0'
        newDiv.style.width = '794px'
        newDiv.style.height = '100%'
        newDiv.style.zIndex = '100000'
        newDiv.style.background = '#fff'
        newDiv.style.overflow = 'auto'
        document.body.appendChild(newDiv)//在body中添加创建的新结点
        window.print()
        document.body.removeChild(newDiv)
      },

还有不妥之处望大佬指出。一起进步