当前位置：首页 > VUE

vue 实现pdf下载

2026-02-20 10:34:24VUE

vue 实现pdf下载的方法

在Vue项目中实现PDF下载功能可以通过多种方式完成，以下是几种常见的方法：

使用a标签下载

将PDF文件放在项目的静态资源目录（如public文件夹），通过<a>标签的download属性实现下载。

<template>
  <a href="/path/to/yourfile.pdf" download="filename.pdf">下载PDF</a>
</template>

使用Blob对象和URL.createObjectURL

适用于从API获取PDF文件流或动态生成的PDF文件。

<template>
  <button @click="downloadPdf">下载PDF</button>
</template>

<script>
export default {
  methods: {
    async downloadPdf() {
      const response = await fetch('https://example.com/api/pdf');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'document.pdf';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }
  }
};
</script>

使用jsPDF库生成并下载PDF

如果需要动态生成PDF内容，可以使用jsPDF库。

安装jsPDF：

npm install jspdf

示例代码：

<template>
  <button @click="generatePdf">生成PDF</button>
</template>

<script>
import { jsPDF } from "jspdf";

export default {
  methods: {
    generatePdf() {
      const doc = new jsPDF();
      doc.text("Hello world!", 10, 10);
      doc.save("document.pdf");
    }
  }
};
</script>

使用PDFKit和Blob

对于更复杂的PDF生成需求，可以使用PDFKit配合Blob。

安装PDFKit和blob-stream：

npm install pdfkit blob-stream

示例代码：

<template>
  <button @click="createPdf">创建PDF</button>
</template>

<script>
import PDFDocument from 'pdfkit';
import blobStream from 'blob-stream';

export default {
  methods: {
    createPdf() {
      const doc = new PDFDocument();
      const stream = doc.pipe(blobStream());

      doc.text('Hello PDFKit!', 100, 100);
      doc.end();

      stream.on('finish', () => {
        const blob = stream.toBlob('application/pdf');
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'document.pdf';
        a.click();
        URL.revokeObjectURL(url);
      });
    }
  }
};
</script>

使用第三方服务

如果PDF文件存储在第三方服务（如AWS S3），可以直接使用文件URL。

vue 实现pdf下载

<template>
  <a :href="pdfUrl" download>下载PDF</a>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'https://your-bucket.s3.amazonaws.com/path/to/file.pdf'
    };
  }
};
</script>