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

最新推荐文章于 2024-06-17 09:31:58 发布

codernmx

最新推荐文章于 2024-06-17 09:31:58 发布

阅读量1.7k

点赞数 4

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_31754591/article/details/123873060

版权

Vue 专栏收录该内容

63 篇文章 5 订阅

订阅专栏

本文介绍了如何在前端使用html2canvas和jspdf库将HTML内容转换为PDF，并通过window.print()方法打印指定DOM节点。示例代码展示了如何选择并处理特定DOM元素，以及在打印过程中避免事件丢失的问题。

摘要由CSDN通过智能技术生成

前端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");
    }
    )
}

<div id="pdfTest">测试前端生成pdf文件</div>

//调用
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)
      },