vue+axios 运用Blob对象实现文件下载

本文转自：https://www.cnblogs.com/yulj/p/8494465.html

功能：点击导出按钮，提交请求，下载excel文件；

第一步：跟后端童鞋确认交付的接口的response header设置了

以及返回了文件流。

第二步：修改axios请求的responseType为blob，以post请求为例：

axios({
    method: 'post',
    url: 'api/user/',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    responseType: 'blob'
}).then(response => {
    this.download(response)
}).catch((error) => {

})

第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

methods: {
    // 下载文件
    download (data) {
      if (!data) {
        return
      }
      let blob = new Blob([data])
      let fileName = 'excel.xls'
      if ('download' in document.createElement('a')) { // 不是IE浏览器
        let url = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
      } else { // IE 10+
        window.navigator.msSaveBlob(blob, fileName)
      }
    }
}

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xjf106/article/details/89361311
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-30 11:47:27
阅读 ( 1776 )
分类：前端

vue+axios 运用Blob对象实现文件下载

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看