前端下载文件成功，但打不开

前端通过后端返回的文件流下载excel文件方法如下：

downloadExlFile(data, fileName) {
  let blob = new Blob([data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=utf-8'
  })
  let a = document.createElement('a')
  let url = window.URL.createObjectURL(blob)
  a.href = url
  a.download = fileName
  document.body.appendChild(a)
  a.style.display = 'none'
  a.click()
  window.URL.revokeObjectURL(url)
}

但是我遇到一个问题：就是下载文件成功了但是打不开，一看是文件损坏。

后来浏览了好多篇文章后发现，就因为main.js中引入了mock.js，但其实并没有使用，就算没有使用也会拦截到我的接口请求并改变返回的内容

这是被改变后的样子，就算接口请求里面responseType设置为blob，但输出接口返回仍然是下面的这个样子，且request被改为MockXMLHttpRequest

image.png

正常的应该是返回data为Blob对象，request是一个XMLHttpRequest对象

image.png

结论就是，在main.js中注释掉mock.js就好啦！～～

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容