vue导出表格数据，并生成xlsx文件
vue导出表格数据，并生成xlsx文件
前端：
为文件导出按钮绑定点击事件，代码如下：
表格代码：
<el-table :data="orderList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" stripe style="width:100%;margin-top:10px;" >
<el-table-column prop="viewId" label="id" width="80px;">el-table-column>
<el-table-column prop="name" label="厂商名称" width="150px;">el-table-column>
<el-table-column prop="brand" label="品名" width="150px;">el-table-column>
<el-table-column prop="type" label="规格" width="200px;">el-table-column>
<el-table-column prop="content" label="加工内容" width="260px;">el-table-column>
<el-table-column prop="count" label="数量(个)" width="80px;">el-table-column>
<el-table-column prop="price" label="单价(元)" width="90px;">el-table-column>
<el-table-column prop="sum" label="金额(元)" width="90px;">el-table-column>
<el-table-column prop="note" label="备注" width="60px;">el-table-column>
<el-table-column prop="time" label="时间" width="120px;">el-table-column>
<el-table-column align="left">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
template>
<template slot-scope="scope">
<el-button type="warning" @click="openUpdatePanel(scope.row.id)" icon="el-icon-document">修改el-button>
<el-button type="danger" @click="openDelPanel(scope.row.id)" icon="el-icon-delete">删除el-button>
<el-button type="success" @click="openOkPanel(scope.row.id)" icon="el-icon-check">完成el-button>
template>
el-table-column>
el-table>
export2Excel() {
const loading = this.$loading({
lock: true,
text: '努力加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
axios({
method: 'get',
url: 'testExprotExcelx', //请求地址
responseType: 'blob'
}).then((res) => {
const content = res.data
const blob = new Blob([content])//构造一个blob对象来处理数据
var time=new Date();
var month=time.getMonth()+1;
const fileName = '厂商订单汇总('+time.getFullYear()+"年"+month+"月"+time.getDate()+"日)"+'.xlsx'
//对于标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { //支持a标签download的浏览器
const link = document.createElement('a')//创建a标签
link.download = fileName//a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click()//执行下载
URL.revokeObjectURL(link.href) //释放url
document.body.removeChild(link)//释放标签
} else { //其他浏览器
navigator.msSaveBlob(blob, fileName)
}
loading.close()
}, (error) => {
this.$message.error('请求异常');
loading.close()
})
},
//格式转换，直接复制即可
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel是点击事件，formatJson是格式转化，一共两个函数
后端：
@RequestMapping("/testExprotExcelx")
public String testExprotExcelx(HttpServletResponse response){
try {
//创建一个数组用于设置表头
List<String> header =new ArrayList<>();
header.add("厂商名称");
header.add("品名");
header.add("规格");
header.add("加工内容");
header.add("数量");
header.add("单价");
header.add("金额");
header.add("备注");
header.add("时间");
//数据
List<Map<String,String>> list=new ArrayList<>();
List<Order> listReal=orderService.selectAllOrder1(); //数据是直接查的
for(int i=0;i<listReal.size();i++){
Map<String ,String> mapReal=new HashMap<>();
mapReal.put("厂商名称",listReal.get(i).getName());
mapReal.put("品名",listReal.get(i).getBrand());
mapReal.put("规格",listReal.get(i).getType());
mapReal.put("加工内容",listReal.get(i).getContent());
mapReal.put("数量",Integer.toString(listReal.get(i).getCount()));
mapReal.put("单价",""+listReal.get(i).getPrice());
mapReal.put("金额",""+listReal.get(i).getSum());
mapReal.put("备注",listReal.get(i).getNote());
mapReal.put("时间",""+dateToTime.dateToTime(listReal.get(i).getTime()));
list.add(mapReal);
}
//声明一个工作簿
XSSFWorkbook workbook = new XSSFWorkbook();
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
//生成一个表格，设置表格名称为"每日库存情况表"
XSSFSheet sheet = workbook.createSheet("厂商订单汇总表("+df.format(new Date())+")");
//设置表格列宽度为10个字节
sheet.setDefaultColumnWidth(10);
//创建第一行表头
XSSFRow headrow = sheet.createRow(0);
//遍历添加表头
for (int i = 0; i < header.size(); i++) {
//创建一个单元格
XSSFCell cell = headrow.createCell(i);
//创建一个内容对象
XSSFRichTextString text = new XSSFRichTextString(header.get(i));
//将内容对象的文字内容写入到单元格中
cell.setCellValue(text);
}
//模拟遍历结果集，把内容加入表格
for (int i = 0; i < list.size(); i++) {
XSSFRow row1 = sheet.createRow(i+1);
for (int j=0;j<header.size();j++){
XSSFCell cell = row1.createCell(j);
XSSFRichTextString text = new XSSFRichTextString(list.get(i).get(header.get(j))+"");
cell.setCellValue(text);
}
}
//准备将Excel的输出流通过response输出到页面下载
response.setContentType("application/octet-stream");
response.setHeader("Content-disposition", "attachment;filename=厂商订单汇总("+df.format(new Date())+").xlsx");
//刷新缓冲
response.flushBuffer();
//workbook将Excel写入到response的输出流中，供页面下载
workbook.write(response.getOutputStream());
return "导出成功";
} catch (Exception e) {
e.printStackTrace();
return "导出失败";
}
}
OK了，还是很方便的，比网上其他方法简单多了，我多加了个文件导出的效果图，大家一实验就看见了，文件导出效果图如下：
