vue，axios，文档流导出xls表格

最新推荐文章于 2023-08-28 14:55:42 发布

原创最新推荐文章于 2023-08-28 14:55:42 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍在Vue项目中如何使用Axios接收后台返回的文档流数据，并将其转换为Excel表格进行下载。通过设置Axios的responseType为'blob'，可以获取到二进制数据，再利用Blob对象和HTML5的a标签实现文件下载。

vue项目中,axios接收后台返回的文档流xls数据，导出excel表格

// 事件函数
 exportCase() { //点击后下载
                
                if (this.checkArr.length > 0) {
                	// daochu 是这里封装的一个请求  自己写请求时一定要{responseType: 'blob'} 响应数据类型是必写的
                    daochu(qs.stringify({
                        heardNames: this.checkArr.join(","),
                        casIds: ID.join(",")
                    }), {responseType: 'blob'}).then(res => {
                        let url = window.URL.createObjectURL(new Blob([res], {type: 'application/x-xls'}))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        let timestamp = new Date().getTime()
                        let ran = Math.random()
                        link.setAttribute('download', "case_" + timestamp + "_" + ran + ".csv")
                        document.body.appendChild(link)
                        link.click()
                        window.URL.revokeObjectURL(url);//释放blob
                    })
                } else {
                    this.$message.error('请选择表头');
                }