公司前端使用的是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;
    }
    }

DownloadResult 是我们公司平台封装的一个下载用的类,其实就是response在响应,返回值需要时二进制byte[]数组,这样之后前端就可以下载到excel

Logo

前往低代码交流专区

更多推荐