vue post下载

vue 使用 axios.post 下载文档

1、前端代码

// 导出数据
async exportBillData() {
	// 使用时修改这里的 url 和 params 即可
    let url = '/report/exportBillData';
    let params = {
        countMonth: this.form.statisticsTime,
        messageType: this.form.spType,
        sp: this.form.smsVendor,
        channelType: this.form.type,
    };
    this.download(url, params);
},
// 通用下载
download(url, params) {
    const config={
        responseType: 'blob' //这个一定要设置，否则会出现文件下载后打不开的情况
    }
    axios.post(url,params,config).then(res=>{
        let blob = new Blob([res.data], { //设置数据源
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream'  //设置文件格式
        });
        let objectUrl = URL.createObjectURL(blob); //创建下载的链接
        let a = document.createElement("a");
        a.href = objectUrl;
        let fileName = res.headers['content-disposition'].split('filename=')[1];
        fileName = decodeURI(fileName);
        a.download = fileName; //设置文件名
        //下面这个写法兼容火狐
        a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
        window.URL.revokeObjectURL(blob); //释放bolb对象
    }).catch(function (error) {
        console.log(error);
    });
},

2、后端代码

后端代码大致是这样，我这里主要考虑前端代码，后端应该都差不多。

@RequestMapping("exportBillData")
public void exportBillData(@RequestBody ReqExportBillDataVo request, HttpServletResponse response) {
    try {
        String fileName = java.net.URLEncoder.encode("bill_" + request.getCountMonth() + ".xlsx", "UTF-8");
        response.reset();
        // 生成EXCEL文件
        SXSSFWorkbook wb = generateBillDataExcel(request.getCountMonth(), request.getMessageType(), request.getSp(), request.getMessageType());
        // 生成提示信息，
        response.setHeader("content-disposition", "attachment;filename=" + fileName);
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

        wb.write(response.getOutputStream());
        wb.dispose();
    } catch (Exception e) {
        log.error("导出对账数据异常，异常信息：{}", Throwables.getStackTraceAsString(e));
    }
}

参考：

https://blog.csdn.net/weixin_53350466/article/details/126469254

https://blog.csdn.net/xiaobing_hope/article/details/103363513

https://www.cnblogs.com/spaceapp/p/10844084.html