vue axios导出excel文件乱码的解决方案

大家在请求接口前会发现都是乱码(图片显示的乱码返回是正常的),

这个其实要前后端配合,如果后端没问题,那么就需要前端解决乱码。

直接附上代码:

axios({ // 用axios发送post请求

                method: 'post',

                url:'输入接口地址', // 请求地址

                responseType: 'blob', // 表明返回服务器返回的数据类型

                headers: {'Content-Type': 'application/json'}

            }).then(res => { // 处理返回的文件流

                const blob = new Blob([res.data]);//new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)

                const fileName = '文件名称.xls'; //这里可以自定义名称,发现设置xlsx文件类型下载后打开会提示下面图-1的无效报错,所以我用了xls格式

                const elink = document.createElement('a');

                elink.download = fileName;

                elink.style.display = 'none';

                elink.href = URL.createObjectURL(blob);

                document.body.appendChild(elink);

                elink.click();

                URL.revokeObjectURL(elink.href); // 释放URL 对象

                document.body.removeChild(elink);

            })

如下 图-1

最后用了 xls格式就成功打开了(如果你非要用xlsx,网上的解答是 重装wps 或者 打开无效提示 点 确定 ,然后点新建空白,在历史上找到你下载的文件 在重新打开就可以了。个人觉得比较麻烦所以用了 xls格式,这个还是看公司需求吧。)

你可能感兴趣的:(vue axios导出excel文件乱码的解决方案)