当前位置：首页 > VUE

vue实现PDF导出

2026-01-18 21:36:39VUE

Vue 实现 PDF 导出方法

使用 jsPDF 库

jsPDF 是一个流行的 JavaScript 库，用于生成 PDF 文件。安装依赖：

npm install jspdf

示例代码：

import jsPDF from 'jspdf';

export default {
  methods: {
    generatePDF() {
      const doc = new jsPDF();
      doc.text('Hello Vue!', 10, 10);
      doc.save('vue-pdf.pdf');
    }
  }
}

使用 html2canvas 和 jsPDF 结合

对于需要将 HTML 内容转为 PDF 的场景，可以结合 html2canvas 实现：

npm install html2canvas jspdf

示例代码：

vue实现PDF导出

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

export default {
  methods: {
    async exportToPDF() {
      const element = document.getElementById('pdf-content');
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('vue-html-pdf.pdf');
    }
  }
}

使用 vue-html-to-paper 插件

这是一个 Vue 专用插件，简化了打印和 PDF 导出流程：

npm install vue-html-to-paper

配置示例：

import VueHtmlToPaper from 'vue-html-to-paper';

Vue.use(VueHtmlToPaper, {
  name: '_blank',
  specs: ['fullscreen=yes', 'titlebar=yes']
});

使用示例：

vue实现PDF导出

<button @click="print">Export PDF</button>
<div id="print-content">Content to export</div>

<script>
export default {
  methods: {
    print() {
      this.$htmlToPaper('print-content');
    }
  }
}
</script>

使用 PDFKit（Node.js 后端方案）

对于需要更复杂 PDF 生成的场景，可以结合后端服务：

npm install pdfkit

Node.js 示例：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Vue Generated PDF', 100, 100);
doc.end();

前端通过 API 调用触发生成。