前端导出后台Excel的方式

发表于 更新于 分类于 本文字数： 1k 阅读时长 ≈ 1 分钟

场景

前端导出按钮点击，下载从后端返回的Excel文件

方案

  1. 后端返回的是二进制文件的话，Window.open(req.url?param=x)可以直接下载

这种方式的缺点是，不能针对后端返回情况做处理。

  1. 使用blob对象处理后端返回数据,如下： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    this.$ajax({
        url:'reqUrl',
        method:'get', //post
        responseType: 'blob' //这里必须指明响应类型
    }).then(ret=>{
        if(ret.data.type == 'application/json'){
            //todo
        }else{
            let filename = ret.headers['content-disposition']
            .split(';')[1]
            .split('filename=')[1]
            .split('.xlsx')[0]
            //后端给的文件名可能带有中文，到前端会自动编码(URI)，这里解码一下
            this.exportExcel(ret.data, decodeURI(filename))
        }
    })
    // 模仿自动下载
    exportExcel(blobData, filename) {
        const link = document.createElement('a')
        let blob = new Blob([blobData], {
        type:
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        console.log(link.href)
        link.download = filename 
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }