Vue 前端导出后端返回的excel文件

栏目: 编程语言 · 发布时间: 5年前

内容简介:页面:先筛选,向后端请求接口返回excel文件,代码如下:

在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录。

页面:

Vue 前端导出后端返回的excel文件

先筛选,向后端请求接口返回excel文件,代码如下:

const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder'
    console.log(this.form)
    let param = new URLSearchParams();
    param.append("startDate", "2019-01-01");
    param.append("endDate", "2019-02-01");
    this.$axios.post(apiUrl, param,{responseType: 'blob'}).then((res) => {
        console.log( res.data)
        const link = document.createElement('a')
        let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob);
        let num = ''
        for(let i=0;i < 10;i++){
            num += Math.ceil(Math.random() * 10)
        }
        link.setAttribute('download', '外卖统计_' + num + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    })

仔细看axios请求加了个responseType: 'blob'配置,这是很重要的

Vue 前端导出后端返回的excel文件

可以看到请求返回了一个Blob对象,你如果没有正确的加上responseType: 'blob’这个参数,返回的就不是个Blob对象,而是字符串了。

然后就自动下载了!

参考 https://blog.csdn.net/liujun03/article/details/84378942


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Making Things See

Making Things See

Greg Borenstein / Make / 2012-2-3 / USD 39.99

Welcome to the Vision Revolution. With Microsoft's Kinect leading the way, you can now use 3D computer vision technology to build digital 3D models of people and objects that you can manipulate with g......一起来看看 《Making Things See》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具