当前位置：首页 > VUE

vue 实现导出pdf

2026-01-14 08:18:03VUE

实现 Vue 导出 PDF 的方法

使用 html2pdf.js 库

html2pdf.js 是一个基于 jsPDF 和 html2canvas 的库，可以直接将 HTML 元素转换为 PDF。

安装依赖：

npm install html2pdf.js

示例代码：

import html2pdf from 'html2pdf.js'

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('content-to-export')
      const opt = {
        margin: 1,
        filename: 'document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      }
      html2pdf().from(element).set(opt).save()
    }
  }
}

使用 jsPDF 和 html2canvas

这两个库组合可以实现更灵活的 PDF 导出功能。

安装依赖：

npm install jspdf html2canvas

示例代码：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  methods: {
    async exportToPDF() {
      const element = document.getElementById('content-to-export')
      const canvas = await html2canvas(element)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF('p', 'mm', 'a4')
      const imgWidth = 210
      const imgHeight = (canvas.height * imgWidth) / canvas.width
      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
      pdf.save('document.pdf')
    }
  }
}

使用 vue-html2pdf 插件

这是一个专门为 Vue 设计的 PDF 导出插件。

安装依赖：

npm install vue-html2pdf

示例代码：

import VueHtml2pdf from 'vue-html2pdf'

export default {
  components: { VueHtml2pdf },
  methods: {
    generateReport() {
      this.$refs.html2Pdf.generatePdf()
    }
  }
}

模板部分：

<vue-html2pdf
  ref="html2Pdf"
  :show-layout="false"
  :float-layout="true"
  :enable-download="true"
  filename="document"
  :paginate-elements-by-height="1400"
  :pdf-quality="2"
  pdf-format="a4"
  pdf-orientation="portrait"
>
  <div slot="pdf-content">
    <!-- 要导出的内容 -->
  </div>
</vue-html2pdf>