关于Blob 前端下载文件(例如excel)功能(主要用于vue 或者 ajax 前端下载)
公司前端使用的是vue,现在需要导出excel,在网上查了一些资料,推荐用Blob- 首先介绍一下Blob一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob,继承了...
·
公司前端使用的是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
更多推荐
已为社区贡献1条内容
所有评论(0)