前端文件下载之一（Blob）

最新推荐文章于 2024-03-30 16:10:40 发布

菜菜的小博

最新推荐文章于 2024-03-30 16:10:40 发布

阅读量352

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_67198021/article/details/130250189

版权

该代码示例展示了如何在前端利用Blob对象处理Base64编码的文件，将其转换为可下载的二进制数据，并通过创建模拟的a标签触发文件下载，支持Firefox等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端文件下载之一（Blob）

const util = {
  // 创建一个a标签，并做下载点击事件
  downloadFile: function (blob, fileName) {
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    // 兼容火狐浏览器
    document.body.appendChild(link)
    const evt = document.createEvent('MouseEvents')
    evt.initEvent('click', false, false)
    link.dispatchEvent(evt)
    document.body.removeChild(link)
  },
  // 将Base64文件转为 Blob
  buildBlobByByte: function (data) {
    const raw = window.atob(data)
    const rawLength = raw.length
    const uInt8Array = new Uint8Array(rawLength)
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i)
    }
    return new Blob([uInt8Array])
  },
  // 二进制数组 生成文件
  downloadFileByByte: function (data, fileName) {
    const blob = this.buildBlobByByte(data)
    this.downloadFile(blob, fileName)
  }
}

util.downloadFileByByte(test, 'xxx.xlsx')