如何实现文件下载 -- 好玩篇

小茗同学阿

已于 2025-01-02 18:29:11 修改

阅读量949

点赞数 5

分类专栏： vue JS 文章标签： vue.js 前端

于 2025-01-02 18:27:32 首次发布

本文链接：https://blog.youkuaiyun.com/zhangbaiming_/article/details/144890555

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

9 篇文章

订阅专栏

文件下载功能是 Web 开发中常见的需求之一，尤其在用户需要获取报告、数据文件或其他资源时。本文将介绍几种常见的实现文件下载的方法，从简单的 HTML5 方法到通过服务器动态生成文件并下载的高级实现，涵盖了文件下载过程中常见的需求和优化技巧。

1. 基本的 HTML 下载按钮

HTML5 引入了一个非常方便的 download 属性，可以直接通过 <a> 标签实现文件下载。当用户点击链接时，浏览器会自动触发下载，而不是将文件打开。

示例：

<a href="path/to/your/file.pdf" download="filename.pdf">
  <button>下载文件</button>
</a>

href: 该属性指定文件的路径。如果文件位于服务器上，提供相应的 URL 地址即可。
download: 这个属性让浏览器开始下载文件，而不是打开它。您可以指定一个文件名，若未指定，浏览器将保存为文件的原始名称。

这种方法适用于静态文件（如 PDF、图像、文本文件等）。它的优点是简单易用，但只能用于静态文件的下载，且在一些较旧的浏览器中可能不被完全支持。

2. 使用服务器端生成文件并触发下载

对于需要从服务器动态生成的文件（如报告、数据文件等），可以通过后端接口生成文件并返回给前端，前端再触发下载操作。此方法适用于较复杂的文件下载场景，例如生成 Excel 报告或 PDF 文件。

示例：

假设后端提供了一个下载接口，前端需要根据用户的请求动态生成文件并下载。

<button id="downloadBtn" onclick="downloadBtn(row)">下载文件</button>

<script>
import {downloadFile} from '@/api/download.js'; // 下载接口

// 根据拿到的数据id 下载对应数据文件
  downloadBtn(row) {
      downloadFile(row.id).then(res => {
        if (!res.code) {
            let type = row.type // 根据数据的类型下载对应的文件类型,如果确定文件类型可以固定
            const downloadElement = document.createElement('a');
            const href = window.URL.createObjectURL(res);
            downloadElement.href = href;
            downloadElement.download = `${row.name}.${type}`;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          } else {
            this.$Message.error('下载文件失败!');
          }
        }).catch(error => {
          this.$Message.error('下载文件失败!');
        });
    }
/**
*这里需要注意的是，res.code 这个根据接口定义的来，有的没有返回，有的返回type，如果返回type的话，看下type类型是什么，自行修改，比如会有 res.type == 'application/octet-stream'，或者可以不用判断，直接创建a下载 等等。
*/
</script>

在这个示例中，我们通过 downloadFile 方法向后端请求文件数据。文件成功返回后，我们创建一个 <a> 标签并通过编程方式触发点击事件来实现下载。使用 window.URL.createObjectURL() 方法将响应内容（通常为 Blob 数据）转换为 URL，然后将其设置为 <a> 标签的 href 属性，最后通过 download 属性指定文件下载时的名称。

后端接口示例：

export const downloadFile = (id) => {
  return axios({
    url: `Your download URL/${id}`,
    method: 'post',
    headers: {
      'Content-Type': 'application/json; application/octet-stream'
    },
    responseType: 'blob', // 请求返回的数据类型为 Blob
    timeout: 0
  });
}

前端通过 responseType: 'blob' 设置响应数据的格式为二进制文件（Blob），从而可以处理非文本文件（如 PDF、图像、Excel 等）。

3. 文件下载加进度条

当下载文件较大时，用户通常希望能够看到文件下载的进度。通过监听下载过程中的进度信息，我们可以在前端页面上动态更新进度条，改善用户体验。

示例：

<button id="downloadBtn" onclick="downloadBtn(row)">下载文件</button>
<Progress :percent="progress.progress" :stroke-width="20" :status="progress.status" text-inside/>

在这段代码中，<Progress> 组件用于显示下载进度。progress.progress 表示当前下载的百分比，progress.status 控制进度条的状态（例如，active 表示正在下载）。

下载进度条更新：

downloadBtn(row) {
    downloadFile(row.id,this.downFileProgress).then(res => {
  // ...
    })
}


downFileProgress(progress) {
    let currentProgress = progress.loaded * 1; // 获取已下载的字节数
    if (this.totalProgress) {
        this.totalProgress += currentProgress;
    } else {
        this.totalProgress = currentProgress;
    }
    let rate = (((this.totalProgress - currentProgress) / this.totalProgress) * 100).toFixed(2) * 1;
    this.progress.progress = rate;
}

downFileProgress 方法计算下载的进度，并实时更新进度条的百分比。在这里，我们使用了 loaded 属性来获取已下载的字节数，并通过计算当前进度来更新 progress.progress，从而更新页面上的进度条。