HTML导出pdf的方式

最新推荐文章于 2025-04-11 11:37:08 发布

原创最新推荐文章于 2025-04-11 11:37:08 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #vue.js

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML

17 篇文章

订阅专栏

该博客介绍了如何利用html2canvas和JsPDF库将网页内容转换并导出为PDF文件。通过选择DOM节点，生成canvas图片，然后将其转化为PDF格式，实现自定义页面布局的PDF生成。此方法适用于前端开发中需要网页内容离线保存的场景。

前联通大佬江哥分享的导出网页为PDF的方法，可以根据Dom节点生成想要的pdf文件

// 导出页面为PDF格式#
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (title) {
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, 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(title + '.pdf')
        }
      )
    }
  }
}