关于Blob 前端下载文件（例如excel）功能（主要用于vue 或者 ajax 前端下载）

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

纯白mi

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

阅读量2.1w

点赞数 4

分类专栏： vue 文章标签： Blob vue

本文链接：https://blog.csdn.net/u010736165/article/details/80744628

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

公司前端使用的是vue，现在需要导出excel，在网上查了一些资料，推荐用Blob
- 首先介绍一下Blob
一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。
一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。
Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

之前以为Blob需要二进制文件流，在后台返回的时候返回二进制，发现下载下来的内容不对，后来查了一下 java是可以直接返回Blob对象的

前端使用axios发送请求

this.axios({
        method:'get',
        url:url,//后台请求地址
        responseType:'blob',
      }).then((data) => {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(data.data)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'product.xls')
        document.body.appendChild(link)
        link.click()
      })

这里重点是responseType:’blob’，加上这个之后后台就会返回Blob对象

后台代码（java）

public DownloadResult exportXls(ActionContext ac){

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

        ActionResult ar = new ActionResult();
        JSONObject args = ac.getArguments();
        String entityId = JsonUtil.getString(args, "entityId");
        String date = JsonUtil.getString(args, "date");
        DownloadResult localDownloadResult = new DownloadResult();
        HttpServletResponse response = ac.getResponse();

        String getDataSql = "select FProduct_name,FCustom_contact_name,FOrder_amount,FDeparture_date,FCreateTime,FPeopleNum from lpp_Order_table where FCreateTime >= '" + date + " 00:00:00' and FCreateTime <= '" + date + " 23:59:59' and FProductId = ? ";

        List<Record> dataRes = Executor.getInstance("default").getRecordList(getDataSql, entityId);

        ByteArrayOutputStream out = new ByteArrayOutputStream();
//        OutputStream out = null;
        try {
                Workbook wb = new HSSFWorkbook();
                //省略生成excel的代码
                wb.write(out);

            byte[] array = out.toByteArray();
            ar.putClientValue("data", array);
            localDownloadResult.setFileName("total.xls");
            localDownloadResult.setContent(array);
        } catch(Exception ex) {
            ex.printStackTrace();
        } finally {
        }

        return localDownloadResult;
    }
    }