手把手教你用 Vue.js 预览和下载 PDF 文件

前端

2023-04-19 05:23:15

使用 Vue.js 预览和下载 PDF 文件

在现代网络应用程序中，经常需要处理 PDF 文件。用户可能需要预览或下载发票、合同或其他类型的文档。Vue.js 是一款功能强大的 JavaScript 框架，提供了广泛的工具来处理 PDF 文件。

先决条件

要使用 Vue.js 预览和下载 PDF 文件，需要：

安装 Node.js
安装 Vue.js
安装 axios 库

创建 Vue.js 项目

首先，创建一个新的 Vue.js 项目：

vue create my-project

安装 axios 库

axios 库用于发送请求并检索数据：

npm install axios

创建 Vue 组件

创建名为 PdfViewer.vue 的 Vue 组件：

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

<script>
import axios from 'axios';

export default {
  methods: {
    downloadPDF() {
      axios({
        url: 'https://example.com/pdf/file.pdf',
        method: 'GET',
        responseType: 'blob',
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const a = document.createElement('a');
        a.href = url;
        a.download = 'file.pdf';
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
  },
};
</script>

注册 Vue 组件

在 main.js 中，注册 PdfViewer 组件：

import Vue from 'vue';
import App from './App.vue';
import PdfViewer from './components/PdfViewer.vue';

Vue.component('pdf-viewer', PdfViewer);

new Vue({
  render: h => h(App),
}).$mount('#app');