当前位置：首页 > VUE

vue实现pdf下载

2026-03-28 17:01:06VUE

实现PDF下载的几种方法

使用`a`标签直接下载

在Vue中可以通过创建a标签并设置href属性为PDF文件路径来实现下载。这种方法适用于静态PDF文件。

vue实现pdf下载

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

<script>
export default {
  methods: {
    downloadPDF() {
      const link = document.createElement('a');
      link.href = '/path/to/your/file.pdf';
      link.download = 'filename.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

使用`axios`下载后端返回的PDF流

如果PDF文件需要通过API请求获取，可以使用axios处理返回的二进制流。

vue实现pdf下载

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

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadPDF() {
      try {
        const response = await axios.get('/api/pdf', {
          responseType: 'blob'
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
}
</script>

使用`jsPDF`动态生成PDF

如果需要动态生成PDF内容，可以使用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('generated.pdf');
    }
  }
}
</script>

使用`pdf-lib`编辑PDF

如果需要编辑现有的PDF文件，可以使用pdf-lib库。

<template>
  <button @click="editPDF">编辑PDF</button>
</template>

<script>
import { PDFDocument } from 'pdf-lib';

export default {
  methods: {
    async editPDF() {
      const existingPdfBytes = await fetch('/path/to/your/file.pdf').then(res => res.arrayBuffer());
      const pdfDoc = await PDFDocument.load(existingPdfBytes);
      const pages = pdfDoc.getPages();
      const firstPage = pages[0];
      firstPage.drawText('Edited with pdf-lib', {
        x: 50,
        y: 50,
        size: 15
      });
      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'edited.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>