vue axios 预览文件流pdf

原创

mob64ca12dea1dc 2024-09-04 05:45:24 ©著作权

文章标签 ios Vue javascript 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dea1dc的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Vue 和 Axios 预览 PDF 文件流

在现代 Web 开发中，文件预览是一项常见需求，尤其是在处理 PDF 文件时。使用 Vue.js 和 Axios，我们可以轻松实现这一功能。本文将详细介绍如何通过 Vue.js 和 Axios 来预览 PDF 文件流，并提供相关代码示例。

1. 准备工作

首先，你需要确保项目中已安装 Vue 和 Axios。我们可以使用 npm 来安装 Axios：

npm install axios

在你的 Vue 项目中引入 Axios：

import axios from 'axios';

2. 发起请求以获取 PDF 文件

为了从服务器获取 PDF 文件，我们需要使用 Axios 发起 GET 请求，并将 responseType 设置为 blob，这将使 Axios 返回一个原始的二进制数据流。

以下是获取 PDF 文件的基础代码示例：

methods: {
  async fetchPdf() {
    try {
      const response = await axios.get(' {
        responseType: 'blob'  // 设置响应类型为 blob
      });
      
      this.createPdfUrl(response.data);
    } catch (error) {
      console.error('Error fetching PDF:', error);
    }
  },
  createPdfUrl(blob) {
    const url = window.URL.createObjectURL(new Blob([blob]));
    this.openPdf(url);
  },
  openPdf(url) {
    const win = window.open(url);
    if (win) {
      win.focus();
    } else {
      alert('Please allow popups for this website');
    }
  }
}

1.1 代码分析

fetchPdf: 该方法负责发送请求并接收 PDF 数据。
createPdfUrl: 该方法将从响应中获取到的 Blob 转换为 URL。
openPdf: 该方法打开新窗口以显示 PDF。

3. UI 上的文件预览按钮

为了让用户可以触发 PDF 下载，您可以在模板中加入一个按钮：

<template>
  <div>
    <button @click="fetchPdf">预览 PDF</button>
  </div>
</template>

4. 整体结构与类图

接下来，我们可以通过类图来更好地理解系统的结构。以下是类图展示。

classDiagram
    class PdfPreview {
        +fetchPdf()
        +createPdfUrl(blob: Blob)
        +openPdf(url: String)
    }

    PdfPreview --> Axios

5. 处理跨域问题

在实际生产中，您可能会遇到跨域问题。这通常会阻止前端应用去请求其他域名的资源。为解决此问题，确保您的 API 服务器允许 CORS（跨域资源共享）。您可以通过设置 HTTP 头部 Access-Control-Allow-Origin 来允许特定的域名访问。

例如，在您的服务器端代码中：

res.header("Access-Control-Allow-Origin", "*");

注意：在生产环境中，不建议使用通配符 "*"，建议指定允许访问的具体域名。

6. 处理服务器错误

在发起请求时，您需要考虑服务器可能返回的各种错误。建议在 catch 中进行适当的错误处理：

catch (error) {
  if (error.response) {
    // 请求已发送，服务器返回一个状态代码
    console.error('Server responded with:', error.response.status);
  } else if (error.request) {
    // 请求已发出，但没有收到回复
    console.error('No response received:', error.request);
  } else {
    // 发送请求时出了问题
    console.error('Error while setting up request:', error.message);
  }
}