vue中导出Excel表报错处理

最新推荐文章于 2025-10-16 17:29:41 发布

原创最新推荐文章于 2025-10-16 17:29:41 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

前端开发知识专栏收录该内容

81 篇文章

订阅专栏

本文介绍了如何在Excel表导出功能中，通过responseType设置为blob来处理不同类型的数据请求。着重讲解了如何根据Content-Type判断并适当地处理返回的JSON数据，确保正确导出Excel文件或显示错误信息。

Excel表导出功能需要将请求中的 responseType 设置为 blob，也就是说请求只能接收Excel文件，json数据没法处理

此时可以根据 Response 的 Content-Type值类判断处理，如果值为 application/json，则先将返回的数据转换成字符串，然后再转换为 JSON

        // 导出
        downLoad(){
            const fileReader = new FileReader() // 第一步创建文件对象
            const loading = this.$loading({
                lock: true,
                text: '导出加载中···',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const data = {
                equipmentName: this.searchForm.equipmentName,
                equipmentCode: this.searchForm.equipmentCode,
            };
            download('/api/mfg-mes/equipmentVersion/exportStandardWorkTime', data).then(res => {
                fileReader.onloadend = () => { // 定义方法
                    if (res.type === 'application/json') { // 第三步进行判断
                        const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
                        // 后台信息
                        // console.log(jsonData,'fileReader')
                        this.$message.error(jsonData.msg)
                        loading.close();
                    }else{
                        downloadFile(res, '信息表', 'xlsx')
                        loading.close();
                    }
                }
                fileReader.readAsText(res)
            }).catch(err => {
                console.log(err);
            })
        },