前端文件下载/导出总结

文件下载/导出的两种方式

• 后端以流的形式返回
• 后端返回一个下载/导出文件的链接地址

后端以流的形式返回

需要考虑的两种情况

• 后端正确的返回了文件流
• 后端出现了异常

相关代码

import axios from 'axios'
const fileService = axios.create({
  baseURL: process.env.BASE_API,
  responseType: 'blob'
})

fileService.interceptors.request.use(config => {
  config.headers['X-Page-Url'] = location.href
  return config
}, error => {
  Promise.reject(error)
})
// 返回res设置
fileService.interceptors.response.use(res => {
  // 此时表明后端出现了异常，并返回异常对象的json字符串  
  if (res.data.type === 'application/json') {
    return new Promise((resolve, reject) => {
      let err = {}
      let reader = new FileReader()
      reader.readAsText(res.data)
      reader.onload = (e) => {
        // 根据项目的实际情况，这里可能可能还要做一些特殊处理（比如：读取该对象中某个特殊字段）
        err = JSON.parse(e.target.result)
        return reject(err)
      }
    })
  } else {
    return res
  }
}, error => {
  return Promise.reject(error)
})

download () {
        let link = document.createElement('a')
        link.style.display = 'none'
        // 请求文件数据，返回类型为blob数据流，类型application/octet-stream
        link.href = window.URL.createObjectURL(res.data)
        link.download = ''//文件名
        document.head.appendChild(link)
        link.click()
        document.head.removeChild(link)
}

后端返回一个下载链接

参考文章

axios导出文件_侯六六的博客-CSDN博客_axios导出文件

移动端H5文件下载_Natsume0的博客-CSDN博客_h5文件下载

(29条消息) 移动端H5下载文件_donggua_123的博客-CSDN博客_h5下载文件

(29条消息) 移动端H5文件下载（ios、isAndroid)_子桑言洛的博客-CSDN博客_h5移动端下载文件

(29条消息) 钉H5微应用在IOS下载文件问题_昨天的梦5的博客-CSDN博客

(29条消息) h5实现文件预览 （兼容ios 、android）_从小就迷茫.的博客-CSDN博客_h5 文件预览

(29条消息) h5实现文件下载，兼容ios、android_从小就迷茫.的博客-CSDN博客_h5文件下载

(29条消息) h5集成到IOS后，文件下载功能无效问题！_iTab的博客-CSDN博客_h5 ios 下载文件

(29条消息) a标签download属性不起作用_小阳光而已丶的博客-CSDN博客_a标签的download不起作用

(29条消息) a标签download无效解决办法_苜可的博客-CSDN博客_a标签download不生效

(29条消息) vue移动端h5中a标签下载/预览文件_Thelittlewhale的博客-CSDN博客_a标签预览文件