乐趣区

js-下载

jiezi

方法一：使用 Blob 对象

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

Blob()构造函数
  • 语法
var blob = new Blob(array, options);

  • 参数

    • array 是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。

    • options 是可选的，它可能会指定如下两个属性：

      • type，默认值为 “”，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。也就是设置文件类型。
      • endings，默认值为 ”transparent”，用于指定包含行结束符 n 的字符串如何被写入。它是以下两个值中的一个：“native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持 blob 中保存的结束符不变。
URL 对象

  • 使用 window.URL.createObjectURL() 创建 URL 对象

    let data = '你的数据'
let blob = new Blob(data)
let objURL = window.URL.createObjectURL(blob)

    调用 createObjectURL()方法时，都会创建一个新的 URL 对象

    为了优化以获得最佳性能，可以使用 window.URL.revokeObjectURL(objURL) 主动释放内存。
    当然，浏览器文档退出时也会自动释放掉的。

使用 a 标签自定义下载
const name = '下载名'
const suffix = 'pbf' // 后缀，文件类型
const aLink = document.createElement('a')
aLink.href = url
aLink.download = `${name}.${suffix}`
aLink.click()

download 设置文件名时可以直接设置拓展名，没有的话，浏览器 一般会 自动检测

<font color=”red”> 一般会自动检测 </font>
$\color{red}{asdasda}$
color 为什么不生效，淦

示例
// json 转 pbf 并下载
jsonToPBF() {
  // this.jsonDataObj 是 json 数据
  const buffer = geobuf.encode(this.jsonDataObj, new Pbf())
  // console.log(buffer)
  const blob = new Blob([buffer])
  this.openDownloadDialog(blob, 'jsonToPbf')
},
openDownloadDialog(url, saveName) {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url)
    console.log('Blob', url)
  }
  const aLink = document.createElement('a')
  aLink.href = url
  aLink.download = `${saveName}.pbf` || ` 下载.pbf`
  // 这里偷懒了，使用了 click 模拟，正确应该使用类似下列的方法
  aLink.click() // 下载文件
  URL.revokeObjectURL(url) // 主动释放内存
  // var event
  // if (window.MouseEvent) {//   event = new MouseEvent()
  // } else {//   event = document.createEvent('MouseEvents')
  //   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, false, 0, null)
  // }
  // aLink.dispatchEvent(event)
}

方法二：使用 js-file-download

  • 安装

    npm install js-file-download --save

  • 使用

    import fileDownload from 'js-filr-download'
axios.get(url, params, {responseType: 'arraryBuffer'})
.then( res => {fileDownload(res.data, 'xxx.pbf')
})
退出移动版