HTML导出pdf的方式

最新推荐文章于 2024-05-09 18:29:01 发布

前端小li

最新推荐文章于 2024-05-09 18:29:01 发布

阅读量1k

点赞数 2

分类专栏： HTML 前端文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/HTML5_student/article/details/121763554

版权

前端同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

前联通大佬江哥分享的导出网页为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')
        }
      )
    }
  }
}