axios 处理响应（ 流文件或 json）

今天遇到一前端问题。axios 导出后台 xls 文件出现乱码。

多会儿没写发现前端了，发现是【没指定响应类型时，axios 默认把响应内容包成字符串，即 type(res.data) = 'string'】，直接保存字符串存储的二进制就出问题了。

解决：指定响应类型为 blob，那么 axios 会把响应包装为 Blob 类型。处理 response 时根据 res.data.type 判断 blob 的类型再进行处理就好了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="down">download</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            down() {
                var http = axios.create({
                    baseURL: 'http://t.t.cn:808/',
                    timeout: 5000,
                    headers: { 'X-Auth-Token': 'b59a2f6c-41ec-bcf2-4cce326b22b2' }
                })
                http.get('/xls/export/afaIIdx1ag3ex', { responseType: 'blob' })
                    .then(res => {
                        if (res.data && res.data.type && res.data.type == 'application/json') {
                            (new Response(res.data)).text().then(
                                res => {
                                    console.log(JSON.parse(res).msg);
                                }
                            )
                        } else {
                            const link = document.createElement('a')
                            link.href = window.URL.createObjectURL(new Blob([res.data]))
                            document.body.appendChild(link)
                            link.download = 'xxx导出.xls'
                            link.click()
                        }
                    }).catch(e => {
                        console.log("error, ", e);
                    })
            }
        }
    })
</script>

</html>
posted @ 2023-01-12 18:11  egu0o  阅读(919)  评论(0)  编辑  收藏  举报