乐趣区

关于vue.js:导出时错误捕获

背景:在实现导出性能的时候,后端返回的是二进制文件流,当导出失败有报错信息时发现无奈提醒到后盾返回的 message,于是就找到了 FileReader 来解决这个问题。
1. 理解 FileReader 定义
FileReader 容许 Web 程序读取文件,所以能够通过这个来转化 Blob 数据。
接下来,看是如何实现的

 exportReport () {var params = this.$refs.query.handleParams();
                afterSale.downloadLocalFirstInsRateList({
                    filters: params,
                    pageIndex: this.pageNum,
                    pageSize: this.pageSize,
                    sorts: []}).then(res => {
                    let that = this;
                    this.sameParams = res;
                    let reader = new FileReader();
                    reader.readAsText(res);
                    reader.onload = function (res) {if (res.target.result.indexOf('statusCode') !== -1) {if (JSON.parse(res.target.result).statusCode === 500) {that.$Message.error(JSON.parse(res.target.result).message);
                            }
                        } else {
                            const fileName = '本地首保率剖析报表.xlsx';
                            const link = document.createElement('a');
                            link.href = window.URL.createObjectURL(that.sameParams)
                            link.download = fileName;
                            link.click()
                            window.URL.revokeObjectURL(link.href);
                        }
                    };
                }).catch(error => {console.log(error);
                    this.loading = false;
                });
            },

首先第一步:new 一个 FileReader 对象
第二步:调用 FileReader 的办法 readAsText
第三步:回调函数 onload 读取胜利时 获取 res.target.result 代表返回的后果,此时就将 Blob 数据转换成了 json 格局的数据。

退出移动版