背景:
对列表里的数据进行选择性下载 (列表有十多个筛选项;采用post方式下载的excel打不开
页面:
开发过程:
- 开始使用的是GET方法,理所应当前端最快捷的方式就是location.href 拼凑 url 直接进行下载。当然也有a标签或者form表单的方式;在我以为一切都很顺利的时候突然发现!!!!这个列表一共有十多个筛选项,有的筛选项是多选的,还有很多十几位的id在里面,我们的params是通过query方式拼到url上的。。。。然后get到了么。。URL会超长啊!!!
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.点开看看效果怎么样吧。
emmmm。。。。。。来人啊,把后端拖出去,好不容易能下载了咋还打不开呢,锅一甩@后端,自己做别的去了。
隔了一天
后端小哥让我改下responseType=“ arraybuffer”或者用{type: "application/vnd.ms-excel"},抱着试试看的想法,加上了responseType。。。。发现确实下载的东西可以打开了!!!!!
原以为是后端的问题,,,居然是因为我自己没有设置responseType。。。piapia打脸。。不过也要感谢小哥让我长见识了,原因是没有设置responseType=“ arraybuffer”的话下载的文件会乱码,所以没有办法打开
===========二更==========
几点补充
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())
})
呼,,,总算是完全解决了~