文件导出/下载功能

1,利用a标签的download属性,实现文件下载。

      download(){
        let that = this
        axios({
          url: 'xxx/yyy',
          data: {},
          method: 'POST',
          responseType: 'blob'   // 要求返回数据类型为blob类型
        }).then((res) =>{
          let data = res.data
          let reader = new FileReader()
          reader.onload = function(){
            try{
              // 如果能被解析,说明是json格式的报错,转化成json格式,报错给用户
              let jsonObj = JSON.parse(this.result)
              alert(jsonObj.msg)       // 弹出报错信息
            }catch(e){
              // 说明是可下载的文件流,执行下载动作
              that.callBackDownload(res)
            }
          }
          reader.readAsText(data)
        })
      },

      callBackDownload(res){
        let type = res.headers['content-type'].split(';')[0]
        let fileName = res.headers['content-disponsition'].split('filename=')[1]
        // let fileData = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
        let fileData = new Blob([res.data], {type: type})
        // msSaveOrOpenBlob 兼容IE10   a.click()在IE10会出现拒绝访问的情况,为了兼容IE需使用
        if(window.navigator.msSaveOrOpenBlob){                
          window.navigator.msSaveOrOpenBlob(fileData, fileName)
        }else{     // 利用a标签完成下载
          let a = document.createElement('a')
          let url = window.URL.createObjectURL(fileData)
          a.style = 'display: none'
          a.download = decodeURI(fileName)
          a.href = url
          a.click()
          a.remove()
          window.URL.revokeObjectURL(url)
        }
      }

设置responseTyle为 blob后,会存在两个问题:
1.如果此时开启了前端mock,responseType将会失效,原因是在请求发送之前mock会默认修改请求头
2.如果接口报错,那么返回的json报错信息将会自动转换成blob类型,从而导致无法获取报错信息。解决方法在代码中已给出。
具体表现可参考: https://www.cnblogs.com/qilj/p/11950517.html
3.代码中只提供了excel的导出,其他格式的文件只需要修改对应的mime type即可
各种文件mime type表可参考 https://www.w3school.com.cn/media/media_mimeref.asp

2 前端拼接下载地址,参数拼接在URL后直接访问

window.open('xxxx/yyyy?name=mmm&number=nnn')
这种方法干脆利索,缺点就是拼接在URL后边安全性不高,也不能拼接很多参数。不过大多数情况下,完全够用了。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。