Vue 如何下载文件流？

terry 5小时前阅读数 9 #Vue

文章标签文件流下载

在 Vue 项目开发中，下载文件流是一个常见的需求，比如从后端获取到文件的二进制流数据，然后将其下载到本地，那具体该怎么做呢？下面我们来详细探讨。

了解文件流下载的基本原理

文件流其实就是二进制数据的一种表现形式，后端将文件以二进制流的方式返回给前端,前端需要做的就是把这些二进制数据转化为浏览器可以识别的文件格式并触发下载。

准备工作

（一）后端接口返回文件流

后端要提供一个能返回文件流的接口，后端会设置响应头，`Content-Type` 为 `application/octet-stream`（表示二进制流），`Content-Disposition` 来指定文件名等信息。

（二）前端 Vue 项目的配置

在 Vue 项目中，我们可以使用 `axios` 来发送请求获取文件流，所以要先安装 `axios`,如果还没安装的话。

具体实现步骤

（一）发送请求获取文件流

在 Vue 的组件方法中，使用 `axios` 发送 `GET` 请求（一般获取文件流用 `GET`），并设置 `responseType` 为 `'blob'`，这样 `axios` 就会把响应数据当作二进制数据（`Blob` 对象）来处理,示例代码如下：

import axios from 'axios';
export default {
  methods: {
    downloadFile() {
      const url = '后端文件流接口地址';
      axios.get(url, {
        responseType: 'blob'
      }).then(response => {
        // 这里得到的 response.data 就是文件流（Blob 对象）
        this.handleFileStream(response.data);
      }).catch(error => {
        console.error('获取文件流失败', error);
      });
    }
  }
};

（二）处理文件流并触发下载

得到 `Blob` 对象后，我们需要创建一个 `URL` 对象，然后利用 `a` 标签的 `download` 属性来触发下载,示例代码：

handleFileStream(blob) {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  // 这里的文件名可以从后端返回的响应头中获取，假设后端在响应头中设置了 'Content-Disposition' 包含文件名
  const fileName = this.getFileNameFromResponse(blob); 
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(url);
},
getFileNameFromResponse(blob) {
  const contentDisposition = blob.type === 'application/json'? '' : blob.headers['content-disposition'];
  if (contentDisposition) {
    const parts = contentDisposition.split(';');
    for (const part of parts) {
      if (part.trim().startsWith('filename=')) {
        return part.split('=')[1].replace(/"/g, '');
      }
    }
  }
  return 'defaultFileName';
}

在 `getFileNameFromResponse` 方法中，我们尝试从响应头的 `content-disposition` 中提取文件名，如果提取失败,就给一个默认文件名。

可能遇到的问题及解决方法

（一）跨域问题

如果前端和后端不在同一个域下，就会遇到跨域问题，解决方法可以是让后端设置 `CORS`（跨域资源共享），允许前端所在域的请求，或者在前端开发环境中使用 `vue-cli` 提供的 `proxy` 代理（在 `vue.config.js` 中配置）。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '后端真实地址',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

（二）文件类型不识别

有时候下载下来的文件打不开，可能是因为 `Blob` 对象的 `type` 属性设置不正确，可以检查后端返回的 `Content-Type` 是否准确，或者在前端创建 `Blob` 对象时指定正确的 `type`，比如如果是 `Excel` 文件，`type` 可以设置为 `'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'`。

优化与扩展

（一）添加进度条

对于大文件的下载，用户可能希望看到下载进度，可以利用 `axios` 的 `onDownloadProgress` 事件来实现，修改 `axios` 请求部分代码：

axios.get(url, {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`下载进度：${percentCompleted}%`);
    // 可以在这里更新 Vue 组件中的进度条数据
  }
}).then(response => {
  // 处理文件流
});

（二）支持多种文件类型

可以根据不同的文件类型做一些特殊处理，比如对于图片文件，在下载前可以先在页面上预览一下,示例代码：

handleFileStream(blob) {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  const fileName = this.getFileNameFromResponse(blob); 
  link.download = fileName;
  // 假设是图片文件（可以通过文件名后缀判断）
  if (fileName.endsWith('.jpg') || fileName.endsWith('.png')) {
    const img = document.createElement('img');
    img.src = url;
    img.style.maxWidth = '100%';
    document.body.appendChild(img);
    setTimeout(() => {
      document.body.removeChild(img);
    }, 3000); // 3 秒后移除预览图片
  }
  link.click();
  window.URL.revokeObjectURL(url);
}

通过以上步骤，我们可以在 Vue 项目中实现文件流的下载，从发送请求获取文件流，到处理文件流并触发下载，再到解决可能遇到的问题以及进行优化扩展，在实际项目中，要根据具体的文件类型和需求进行适当的调整和完善，希望这篇文章能帮助你顺利实现 Vue 中的文件流下载功能。