两种JavaScript文件下载方法

好奇的菜鸟

于 2024-08-26 14:54:22 发布

阅读量206

点赞数 8

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_29752857/article/details/141564157

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在现代Web应用中，提供文件下载功能是一个常见的需求。用户可能需要下载报告、图片、文档等不同类型的文件。本文将通过两段JavaScript代码的深入分析，比较两种实现文件下载的方法，并提供完整的代码示例。

方法一：saveFileToLocal

saveFileToLocal函数是一个通用的文件下载函数，它可以处理从服务器响应中获取的文件数据。这个函数首先尝试从响应头中解析文件名，如果用户没有指定文件名。然后，它使用Blob对象来处理文件数据，并根据浏览器的支持情况选择使用msSaveOrOpenBlob方法或者创建一个临时的下载链接来实现文件下载。

// 导出函数，用于将文件保存到本地
export function saveFileToLocal(res, fileName) {
  let headersFileName = ''; // 用于存储从响应头中解析出的文件名

  // 如果没有提供文件名，则尝试从响应头中获取文件名
  if (!fileName) {
    let contentDisposition = decodeURI(res.headers['content-disposition']);
    // 从res的headers中获取filename，这是后端设置的文件名
    headersFileName = contentDisposition.substring('attachment; filename='.length);
  }

  // 创建一个Blob对象，包含从响应中获取的数据
  let blob = new Blob([res.data]);

  // 检查浏览器是否支持msSaveOrOpenBlob方法
  if (window.navigator.msSaveOrOpenBlob) {
    // 如果支持，则使用该方法保存文件
    navigator.msSaveBlob(blob, fileName || headersFileName);
  } else {
    // 如果不支持，创建一个下载链接并模拟点击来下载文件
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName || headersFileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

方法二：downloadExcelWithResData

downloadExcelWithResData函数是一个专门用于下载Excel文件的函数。它接收要下载的数据和文件名作为参数，创建一个Blob对象，然后创建并点击一个下载链接来触发下载。下载完成后，它会释放掉创建的URL对象，以避免内存泄漏。

// 导出函数，用于下载Excel文件
export function downloadExcelWithResData(data, name) {
  // 创建一个Blob对象，包含要下载的数据
  var blob = new Blob([data]);
  // 创建一个用于下载的a元素
  var downloadElement = document.createElement("a");
  // 创建一个指向Blob的URL
  var href = window.URL.createObjectURL(blob); 
  downloadElement.href = href;
  // 设置下载后的文件名
  downloadElement.download = name; 
  // 将a元素添加到文档中
  document.body.appendChild(downloadElement);
  // 模拟点击a元素下载文件
  downloadElement.click(); 
  // 下载完成后从文档中移除a元素
  document.body.removeChild(downloadElement); 
  // 释放掉创建的URL对象
  window.URL.revokeObjectURL(href);
}

比较与分析

参数差异：saveFileToLocal需要一个响应对象res，适用于从服务器响应中下载文件。而downloadExcelWithResData直接接收数据和文件名，适用于客户端生成的文件下载。
文件名处理：两者都支持动态设置文件名，但saveFileToLocal更侧重于从响应头中解析文件名。
浏览器兼容性：saveFileToLocal考虑了IE浏览器的兼容性，使用msSaveOrOpenBlob方法。downloadExcelWithResData则没有这一处理，适用于现代浏览器。
内存管理：downloadExcelWithResData明确地释放了创建的URL对象，这是良好的内存管理实践。