【若依】 blob导出文件

最新推荐文章于 2024-06-17 14:50:44 发布

AnnieRabbit

最新推荐文章于 2024-06-17 14:50:44 发布

阅读量478

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/AnnieRabbit/article/details/129006335

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章详细描述了如何在Java后端使用HttpServletResponse的outputStream导出文件，结合模板处理数据。前端部分使用JS设置responseType为blob，并通过Vue创建一个a标签模拟点击下载。整个过程涉及地图数据处理和Excel文件格式。

摘要由CSDN通过智能技术生成

适用场景: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)
      })
    },