前端JS下载文件的方法

TUTO老橙
274 阅读4分钟

前端下载文件通常会遇到这样两种情况

  1. 文件上传到资源服务器上，后端只保存了文件地址URL，前端拿到后端返回的文件地址URL直接下载。
  2. 文件就存在后端服务器上（通常是临时根据前端参数动态生成，用完就删除），后端读取文件后向前端返回文件的二进制流。

先说简单的

一. 后端返回url

1. 使用 a 标签下载

// html实现
<a href="http://www.baidu.com" download="baidu.html">下载</a>

// Js实现
const a = document.createElement('a')
a.href = 'http://www.baidu.com' 
a.download = 'baidu.html' 
a.click()

2. 使用 window.open 下载

window.open('http://www.baidu.com', '_blank')

_blank是指定用浏览器新窗口打开链接；如果不指定，那么就会在当前页面打开。

3. 使用 location.href 下载

// 这个方式和window.open是一样的
location.href = 'http://www.baidu.com'

以上这些下载文件的方法都有弊端：

  • 当在下载音、视频文件时，浏览器会直接播放该文件，达不到直接下载的功能。
  • 无法监听到接口返回的错误信息。

所以来讲第二点——————

二. 后端返回二进制流

BLOB (binary large object)----二进制大对象，是一个可以存储二进制文件的容器

1. 调取接口的时候可以加上 responseType: 'blob', // 这里就是转化为blob文件流。

ps: axios可以使用responseType: "arraybuffer"。

2. 接口返回文件流的处理

/**
 * 下载函数
 * @param {string} data - 后端获取的文件流
 * @param {string} name - 文件名
 */
function downloadFile(data, name) {
  const type = response.headers['content-type']
  const blob = new Blob([data],'type');//可以通过`Response`的`header`来获取文件的`type`
  const url = window.URL.createObjectURL(blob);//把`Blob`对象转换成一个`URL`
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  document.body.appendChild(a);
  a.style.display = "none";
  a.click();
  document.body.removeChild(a);
}

为什么有些图片 URL 可以直接保存，而有些图片 URL 需要上传到一个接口再返回一个新的 URL？

图片 URL 的处理方式因具体的使用场景和系统架构而有所不同。为什么有些图片 URL 可以直接保存，而有些图片 URL 需要上传到一个接口再返回一个新的 URL，主要取决于以下几个因素：

1. 图片来源和权限控制

  • 直接保存的图片 URL：通常来自一个公开的、可直接访问的资源，或者你的系统对该资源有完全的访问权限。比如，图片托管在公共的 CDN 上或本地服务器中，并且不涉及访问控制。这些 URL 是公开的，任何人都可以访问和保存图片。
  • 需要上传到接口的图片 URL：可能来源于第三方资源，或者受权限控制，不能直接被保存或访问。例如，某些图片托管在需要认证或临时授权的服务器上，直接保存 URL 可能无法长期访问这些资源。这时候，需要通过上传接口获取图片数据并重新存储到你有权限管理的地方，再返回一个可长期使用的 URL。

2. 数据安全与隐私

  • 直接保存的图片 URL：适用于公开图片，不涉及隐私或敏感信息。
  • 上传再生成新 URL：通常用于确保数据安全和隐私。将图片上传到自己控制的服务器，可以避免暴露原始的图片 URL，防止敏感图片被未经授权的访问。

3. 存储与管理

  • 直接保存的图片 URL：通常适用于不需要长期存储或管理的图片资源。例如，一些临时用途的图片，或者不需要归档管理的图片。
  • 上传再生成新 URL：如果你需要对图片进行管理（如归档、权限控制、备份等），你通常会将图片上传到自己的服务器或云存储中。这种方式可以方便地管理和控制图片的访问权限、存储位置和使用期限。

4. 文件格式和兼容性

  • 直接保存的图片 URL：通常适用于标准的图片格式，并且服务器端已经配置好 MIME 类型等信息，客户端可以直接读取和保存。
  • 上传再生成新 URL：可能涉及到图片的格式转换或压缩。比如，你的系统需要统一图片格式或大小，或者你需要对图片进行优化处理，那么就需要先上传图片，再处理并生成一个新的 URL。

5. 临时 URL 和持久化 URL

  • 直接保存的图片 URL：有些 URL 是临时生成的，例如使用 CDN 提供的 URL，有可能会在一定时间后失效。因此，这类 URL 可能不能直接保存。
  • 上传再生成新 URL：通过上传图片并生成新的 URL，可以确保该 URL 是持久有效的，适合长期保存和使用。

总结

  • 直接保存：通常用于公开的、非敏感的、长期有效的图片资源。
  • 上传再返回 URL：用于确保图片资源的可控性、安全性、长期有效性，以及便于管理和处理。

根据具体需求选择合适的处理方式。

avatar
文章
阅读
粉丝