前端补课：WHAT ? 下载excel文件却打不开？

背景：

对列表里的数据进行选择性下载 （列表有十多个筛选项；采用post方式下载的excel打不开

页面：

image.png

开发过程：

1. 开始使用的是GET方法，理所应当前端最快捷的方式就是location.href 拼凑 url 直接进行下载。当然也有a标签或者form表单的方式；在我以为一切都很顺利的时候突然发现！！！！这个列表一共有十多个筛选项，有的筛选项是多选的，还有很多十几位的id在里面，我们的params是通过query方式拼到url上的。。。。然后get到了么。。URL会超长啊！！！

image.png

2.没办法，改POST方法吧；本来想post返回文件存储链接直接href下载，但是后端没有时间。。。自己来吧

        axios({
          headers: { 'token': Util.getCookie('token') },
          method: 'POST',
          url: 'XXXXXXXX',
          data: params
        }).then((response) => {
          let data = response.data
          if (data && data.isSuccess === false) {
            this.$Message.error(data.resultMsg)
          } else {
            var newBlob = new Blob([data], {type: 'text/plain;charset=UTF-8'})
            var tempA = document.createElement('a')
            tempA.download = '客户信息.xlsx'
            tempA.href = window.URL.createObjectURL(newBlob)
            tempA.click()
          }
        }).catch(async e => {
          this.$Message.error(e.toString())
        })

呼~~_当当当当~_完成~~~~✿✿ヽ(°▽°)ノ✿ ，点击‘导出’，没问题完美的下载下来了~~~

3.点开看看效果怎么样吧。

image.png

image.png

emmmm。。。。。。来人啊，把后端拖出去，好不容易能下载了咋还打不开呢，锅一甩@后端，自己做别的去了。

隔了一天

后端小哥让我改下responseType=“ arraybuffer”或者用{type: "application/vnd.ms-excel"}，抱着试试看的想法，加上了responseType。。。。发现确实下载的东西可以打开了！！！！！

image.png

原以为是后端的问题，，，居然是因为我自己没有设置responseType。。。piapia打脸。。不过也要感谢小哥让我长见识了，原因是没有设置responseType=“ arraybuffer”的话下载的文件会乱码，所以没有办法打开

image.gif

===========二更==========

几点补充

1.上面的responseType除了arraybuffer也可以使用blob进行接收

2.如果是使用上述两种responseType的话，你接收到的就是二进制的流，如果接口报错那么你将没法正常的进行提示；我的情况是成功即返回文本流，不成功则返回json 如下：

{
  data: null, 
  isSuccess: false,
  resultMsg: "查询结果超过10000，不能导出。"
}

3.基于上述的问题最终解决的代码如下

        axios({
          headers: { 'token': Util.getCookie('ssss') },
          method: 'POST',
          url: 'XXXXXXX',
          responseType: 'arraybuffer',
          data: params
        }).then((response) => {
          let data = response.data
          var result = {}
          try {
            let unit8Arr = new Uint8Array(data)
            let encodedStr = String.fromCharCode.apply(null, unit8Arr)
            // 将乱码的中文进行转换
            let decodedStr = decodeURIComponent(escape((encodedStr)))
            result = JSON.parse(decodedStr)
          } catch (e) {
            console.error(e)
          }
          if (result && !result.isSuccess) {
            this.$Message.error(result.resultMsg)
          } else {
            var newBlob = new Blob([data], {type: 'text/plain;charset=UTF-8'})
            var anchor = document.createElement('a')
            anchor.download = '客户信息.xlsx'
            anchor.href = window.URL.createObjectURL(newBlob)
            anchor.click()
          }
        }).catch(async e => {
          this.$Message.error(e.toString())
        })

呼，，，总算是完全解决了~

timg.gif