SpringBoot+Vue 结合blob实现流下载功能

最新推荐文章于 2024-08-20 18:30:57 发布

AngusC·

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量3.3k

点赞数 3

分类专栏： Spring 文章标签： java

本文链接：https://blog.csdn.net/qq_18895659/article/details/108750532

版权

Spring 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

涉及技术

Springboot + Vue + MyExcel(这里也可以使用自己的文件等)

服务端实现

   @GetMapping(value = "/exportOrderFs")
    @CrossOrigin
    public  void exportOrderFs(HttpServletResponse response) throws IOException {
        String path = "/Users/angus/tmp/myexcel-master/example/src/main/resources/templates/";
        // get html file
        Map<String, Object> dataMap = getDataMap();
        try (ExcelBuilder excelBuilder = new FreemarkerExcelBuilder()){
            Workbook workbook = excelBuilder
                    .fileTemplate(path,"freemarkerToExcelExample.ftl")
                    .build(dataMap);
            AttachmentExportUtil.export(workbook,"月报",response);
            //FileExportUtil.export(workbook,new File(path+"测试"));
        }
     }

这里使用的是AttachmentExportUtil 的一个流工具，实现方式同下

   @GetMapping(value = "/exportOrderFs")
    @CrossOrigin
    public  void exportOrderFs(HttpServletResponse response) throws IOException {
        String path = "/Users/angus/tmp/myexcel-master/example/src/main/resources/templates/";
        // get html file
           /**设置头信息*/
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/vnd.ms-excel");
        /**一定要设置成xlsx格式*/
        response.setHeader("Content-disposition", "attachment;filename=" + filename);
        /**创建一个输出流*/
        ServletOutputStream outputStream = response.getOutputStream();
        Map<String, Object> dataMap = getDataMap();
        try (ExcelBuilder excelBuilder = new FreemarkerExcelBuilder()){
            Workbook workbook = excelBuilder
                    .fileTemplate(path,"freemarkerToExcelExample.ftl")
                    .build(dataMap);

            /**写入数据*/
            workbook.write(outputStream);
            /**关闭流*/
            outputStream.close();

        }
     }

Vue实现方式

创建一个请求工具类

getFileRequest（url, params){
    let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: `${base}${url}`,
        responseType: "blob",
        params: params,
        headers: {
            'accessToken': accessToken,
            "Content-Type": "multipart/form-data"
        }
    });
};

如果请求部分代码不这样写，下载下来的 excel 会乱码哦，主要是 responseType 和 headers 吧！

        getFileRequest(url).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                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', 'test.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link)
        });

大功告成