dlsjs 文档站

Chinese

English

Chinese

English

夜间模式

downloadBlob / downloadText / downloadByUrl ​

downloadBlob、downloadText 和 downloadByUrl 三个函数用于在浏览器中触发文件下载。downloadBlob 用于下载 Blob 数据，downloadText 用于下载文本内容，downloadByUrl 用于通过远程地址下载文件。

语法 ​

javascript
downloadBlob(blob, name)
downloadText(text, name)
downloadByUrl(url, name)

参数 ​

downloadBlob ​

  • blob Blob
    • 要下载的 Blob 对象。
  • name string
    • 下载的文件名（包括扩展名）。

downloadText ​

  • text string
    • 要下载的文本内容。
  • name string
    • 下载的文件名（包括扩展名）。

downloadByUrl ​

  • url string
    • 远程文件地址。
  • name string
    • 下载保存的文件名（包括扩展名）。

返回值 ​

  • downloadBlob undefined
  • downloadText undefined
  • downloadByUrl Promise<undefined>

downloadByUrl 为异步函数，内部需先请求获取文件再触发下载。

描述 ​

downloadBlob 通过 URL.createObjectURL 创建 Blob 的临时下载链接，生成 <a> 标签并设置 download 属性后挂载到文档中触发点击下载，最后在 100ms 后移除链接并调用 URL.revokeObjectURL 释放内存。

downloadText 先将文本包装为 new Blob([text], { type: 'text/plain' })，再使用与 downloadBlob 类似的方式触发下载。

downloadByUrl 内部调用了 requestFile 通过 axios 请求获取远程文件为 File 对象，再调用 downloadBlob 触发下载。这种方式相比直接使用 <a> 标签下载可以更好地约束下载格式，在微前端等场景下更可靠。

注意事项 ​

  1. 三个函数均依赖 <a> 标签的 download 属性触发下载，跨域资源下载时浏览器可能忽略 download 文件名而使用原 URL 的文件名。
  2. downloadByUrl 依赖 axios，且目标地址需支持跨域访问或同源访问，否则请求会被浏览器拦截。
  3. 函数内部通过 setTimeout 延迟 100ms 清理资源，确保下载已开始；短时间内大量下载可能产生临时 URL，建议合理控制调用频率。
  4. downloadText 生成的 Blob MIME 类型固定为 text/plain，若需下载其他格式请使用 downloadBlob。
  5. 在非用户交互上下文中调用下载可能被浏览器拦截，建议在点击事件回调中调用。

示例 ​

下载 Blob ​

下载文本 ​

通过 URL 下载 ​

浏览器兼容性 ​

  • 三个函数均依赖浏览器 DOM API 和 URL.createObjectURL，可在所有现代浏览器中使用。
  • <a> 标签的 download 属性在 IE 不被支持，建议在 Chrome、Firefox、Edge、Safari 等现代浏览器中使用。
  • URL.createObjectURL 在 IE10+ 及所有现代浏览器中可用。

性能考虑 ​

  • 时间复杂度: downloadBlob 与 downloadText 为 O(1)；downloadByUrl 取决于网络请求耗时。
  • 内存管理: URL.createObjectURL 创建的对象 URL 会占用内存，函数内部已通过 setTimeout 调用 URL.revokeObjectURL 释放。
  • 频繁下载会创建临时 <a> 元素并触发重排，建议合并下载场景以减少 DOM 操作。

相关函数 ​