适用场景:blob方式导出文件

1.后端代码

导出方法用response.getOutputStream()输出流,
重点是方法返回值为void

    @PostMapping("/exportMapData")
    public void exportMapData(HttpServletResponse response) throws IOException {

        Map<String, Object> map0 =   insurancePersonAuditService.getMapData("0");
        Map<String, Object> map1 =   insurancePersonAuditService.getMapData("1");

       //模板位置
        String templateFileName0 = TestFileUtil.getPath() +  File.separator + "simple.xlsx";
        List<SheetData> obj=new ArrayList<>();
        SheetData sheetData0=new SheetData();
        sheetData0.setMap(map0);
        sheetData0.setIndex(0);
        obj.add(sheetData0);

        SheetData sheetData1=new SheetData();
        sheetData1.setMap(map1);
        sheetData1.setIndex(1);
        obj.add(sheetData1);
        testService.newExportExcelByTemplate(response,"汇总表",obj,templateFileName0);
    }

2.js

重点,方法一定要写这一句:responseType: ‘blob’,

// 导出
export function exportMapData(query) {
  return request({
    responseType: 'blob',
    url: '/system/exportMapData',
    method: 'post',
    params: query
  })
}

3.vue

相当于创建一个a标签,给标签一个url,并点击来下载文件

    export() {
      exportMapData().then((res) => {
        // 该实例化的方式第一个参数必须是数组的格式
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel',
        });

        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a');
        a.href = url;
        a.download = '汇总表';
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch((r) => {
        console.error(r)
      })
    },
Logo

快速构建 Web 应用程序

更多推荐