持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

这个是pc端下载 手机端下载得跟原生app交互，给原生地址，由原生去下载

一、文件流的文件下载

参考链接

1.点击查看------》（整个流程）vue-以文件流-blob-的形式-下载-导出文件

2.点击查看------》文件类型后缀大全

3.点击查看------》（整个流程）

4.点击查看------》（主要部分）

主要的一部分

....
此处省略...
调下载接口或者直接获取到对应的文件流形式（就是一大堆乱七八糟看不懂的码）
....
// res.data  是后端返回的文件流
// 调用 downloadUrl 处理文件
downloadUrl(res.data, exportFileName)

// 使用iframe框架下载文件 -兼容性考虑
export function downloadUrl(res, name) {
  // 下面这个type可以动态传值，若是地址，可取下载地址的后缀 将vnd.ms-excel替换掉成具体的格式【格式后缀有哪些 可参考头部练级】
  const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，
  // for IE
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const fileName = name + '.xlsx'
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else {
    // for Non-IE (chrome, firefox etc.)
    const fileName = name + '.xlsx'  // 导出的文件名 ，记得看下文件名是否是完整的，完整的就不需要加后缀了
    const elink = document.createElement('a') // 创建a标签
    // a标签添加属性
    elink.download = fileName // 给下载文件自定义命名
    elink.style.display = 'none' // 将a标签隐藏掉
    elink.href = URL.createObjectURL(blob) 
    document.body.appendChild(elink)
    elink.click() // 执行下载
    URL.revokeObjectURL(elink.href) // 释放URL对象
    document.body.removeChild(elink) // 释放标签
  }
}

注：如果是使用接口获取的下载地址，一定要对接口的请求头设置请求类型，否则文件下载成功之后打开失败

1.方法一

//请求头设置中判断 相应的地址设置config.responseType = 'blob'

// request拦截器
service.interceptors.request.use(
  config => {　　 // 根据接口判定
    if ( config.url === '/setting/exportData' ||
    config.url.indexOf('export') > -1 ||
    config.url.indexOf('Export') > -1) {
      config.responseType = 'blob'  // 服务请求类型
    }
    if (getToken()) {
      config.headers['access_token'] = getToken()
    }
    return config
  },
  error => {
    // Do something with request error
    // console.log(error) // for debug
    Promise.reject(error)
  }
)

1.方法二

二、地址url的文件下载

 this.fileLinkToStreamDownload1(
          row.downloadUrl, // 下载地址
          row.name,// 下载名字（此处不带后缀，如果带后缀的话，下面的downloadElement.download配置就要改一下了）
          row.downloadUrl.substring(row.downloadUrl.lastIndexOf('.') + 1) // 后缀：根据下载地址取后缀
        )

// pdf文件下载
    fileLinkToStreamDownload1 (url, fileName, type) {
      const _this = this
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.setRequestHeader('Content-Type', `application/` + type)
      xhr.responseType = 'blob'
      xhr.onload = async function () {
        var blob = this.response // this.response是二进制文件流
        await _this.downloadExportFile1(blob, fileName, type)
      }
      xhr.send()
    },
    downloadExportFile1 (blob, tagFileName, fileType) {
      var downloadElement = document.createElement('a')
      var href = blob
      if (typeof blob == 'string') {
        downloadElement.target = '_blank'
      } else {
        href = window.URL.createObjectURL(blob) //创建下载的链接
      }
      downloadElement.href = href
      downloadElement.download = tagFileName + '.' + fileType //下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      if (typeof blob != 'string') {
        window.URL.revokeObjectURL(href) //释放掉blob对象
      }
    },