当前位置：首页 > VUE

vue项目实现pdf

2026-02-17 13:17:02VUE

Vue 项目中实现 PDF 功能

在 Vue 项目中实现 PDF 功能可以通过多种方式完成，包括生成 PDF、预览 PDF 或下载 PDF。以下是几种常见的方法：

使用 jsPDF 生成 PDF

jsPDF 是一个流行的 JavaScript 库，用于生成 PDF 文件。可以通过 npm 安装：

npm install jspdf

在 Vue 组件中使用 jsPDF：

import jsPDF from 'jspdf';

export default {
  methods: {
    generatePDF() {
      const doc = new jsPDF();
      doc.text('Hello, this is a PDF generated in Vue!', 10, 10);
      doc.save('example.pdf');
    }
  }
}

使用 vue-pdf 预览 PDF

vue-pdf 是一个 Vue 组件，用于在浏览器中预览 PDF 文件。安装方式：

npm install vue-pdf

在 Vue 组件中使用 vue-pdf：

import pdf from 'vue-pdf';

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: '/path/to/your/file.pdf'
    };
  }
}

模板部分：

<pdf :src="pdfUrl"></pdf>

使用 pdf-lib 操作 PDF

pdf-lib 是一个功能强大的库，用于创建和修改 PDF 文档。安装方式：

npm install pdf-lib

在 Vue 组件中使用 pdf-lib：

import { PDFDocument, rgb } from 'pdf-lib';

export default {
  methods: {
    async modifyPDF() {
      const pdfDoc = await PDFDocument.create();
      const page = pdfDoc.addPage([550, 750]);
      page.drawText('Hello, PDF-Lib!', {
        x: 50,
        y: 700,
        size: 50,
        color: rgb(0, 0, 0),
      });
      const pdfBytes = await pdfDoc.save();
      this.downloadPDF(pdfBytes);
    },
    downloadPDF(pdfBytes) {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'modified.pdf';
      link.click();
    }
  }
}

使用 html2pdf.js 将 HTML 转换为 PDF

html2pdf.js 可以将 HTML 内容直接转换为 PDF。安装方式：

npm install html2pdf.js

在 Vue 组件中使用 html2pdf.js：

import html2pdf from 'html2pdf.js';

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

模板部分：

<div id="content-to-export">
  <h1>This content will be exported to PDF</h1>
  <p>More content here...</p>
</div>
<button @click="exportToPDF">Export to PDF</button>

使用 PDF.js 渲染 PDF

PDF.js 是 Mozilla 开发的 PDF 渲染库，适用于复杂场景。安装方式：

npm install pdfjs-dist

在 Vue 组件中使用 PDF.js：

import * as pdfjsLib from 'pdfjs-dist';

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false
    };
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      this.pdfDoc = await loadingTask.promise;
      this.renderPage(this.pageNum);
    },
    async renderPage(num) {
      this.pageRendering = true;
      const page = await this.pdfDoc.getPage(num);
      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
      this.pageRendering = false;
    }
  },
  mounted() {
    this.loadPDF('/path/to/your/file.pdf');
  }
}

模板部分：