js 下载

方法一：使用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设置文件名时可以直接设置拓展名，没有的话，浏览器 一般会自动检测

一般会自动检测
$\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')
  })