vue下载pdf封装成js全部调用

最新推荐文章于 2026-04-19 08:47:25 发布

原创最新推荐文章于 2026-04-19 08:47:25 发布 · 349 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在Vue项目中利用html2canvas和jspdf库将HTML内容转换为PDF并进行下载。首先通过npm安装这两个模块，然后创建htmlToPdf.js文件编写转换逻辑，最后在main.js中全局注册并在组件中调用。

1，添加两个模块html2canvas和jspdf
（1）npm install --save html2canvas（将页面html转换成图片）
（2）npm install --save jspdf（将图片生成pdf）
2，创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/htmlToPdf.js’),内容如下

import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
      var element = document.getElementById('guideListMain')
      html2canvas(element, {
        logging: false
      }).then(function (canvas) {
        var pdf = new JSPDF('p', 'mm', 'a4') // A4纸，纵向
        var ctx = canvas.getContext('2d')
        var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
        var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
        var renderedHeight = 0

        while (renderedHeight < canvas.height) {
          var page = document.createElement('canvas')
          page.width = canvas.width
          page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

          // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
          pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距

          renderedHeight += imgHeight
          if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
          // delete page;
        }
        pdf.save(htmlTitle + currentTime)
      })
    }
  }
}

3.全局引用main.js挂在模块使用

import htmlToPdf from './api/htmlToPdf.js'
Vue.use(htmlToPdf)

4.组件使用

  data: function () {
     return {
       htmlTitle: '办证指南',
       nowTime: '',
     }
   },
	<el-button type="primary" @click="download(htmlTitle,nowTime)"><i class="el-icon-download"></i>  下载</el-button>
	 download: function (htmlTitle, nowTime) {
  		this.ExportSavePdf(htmlTitle, nowTime)
     },

标签

#vue