方法一：使用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 = urlaLink.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')})