vue+springBoot实现前端页面导出Excel文件功能

vue：

0 初始化第三方插件

在编辑器里执行

npm install js-file-download

例如：我用的是webstorm



直接回车安装即可，没有err就是安装成功了

1 在页面上先添加导出按钮

导出数据

由于本人对vue不懂，所以就不详细介绍了，主要是@click这个属性是监控点击事件，当点击导出数据按钮时，触发exportData函数，这是个自己定义的函数，里边自己写逻辑代码。

2 在页面上定义方法

exportData(){
let params = {
//医院code
hosCode: this.companyCode,
//当前页
pageNum: this.currentPage,
//每页的数量
pageSize: this.pageSize,
//监测点类型
monitorPlaceType: this.monitorPlaceType,
//监测点名称
monitorPlaceName: this.monitorPlaceName,
//日期选择
abnoDate: this.abnoDate
}
request.exportBlob('/admin/Statistics/excelData', params, {responseType: 'arraybuffer'}).then(res => {
fileDownload(res.data, '统计查询.xls')
})
}


如果你也不会vue，也不知道写在哪个地方，去其他页面看看，他们自定义的方法都写在哪就好了

request.exportBlob其实是我们前端对某些用法的封装，等会看下代码就知道了。

3 引入js

在vue页面中，引入具体方法的js文件

import fileDownload from 'js-file-download'

import request from '@/utils/request'

4 编写request.js文件

import axios from 'axios'
// 携带请求头导出文件
const exportBlob = (url, params, cOnfig= {}) => axios.post(baseURL+url, params, {
...config,
responseType: 'blob'
})
export default {
exportBlob
}


后台

1 controller

@PostMapping("/excelData")
@OperationLog(name = "统计查询-导出功能", type = OperationLogType.INFO)
@ApiOperation(value = "统计查询-导出数据",notes = "导出记录")
public void excelData(@RequestBody StatistiCsondition statistiCsondition,HttpServletResponse response){
thmsStatService.excelData(statistiCsondition,response);
}


2 service

void excelData(StatistiCsondition statistiCsondition,HttpServletResponse response);


3 impl

List res = thmsStatMapper.sel(wrapper);

这是我系统自己的方法，主要是提供数据用的，

你可以List> res = 获取数据的方法;

List res = thmsStatMapper.sel(wrapper);

try{

//创建excel文件流

HSSFWorkbook wb = new HSSFWorkbook();

HSSFSheet sheet = wb.createSheet("记录");

HSSFRow row = null;

int columnIndex = 0;

row = sheet.createRow(0);

row.setHeight((short) (22.50 * 20));//设置行高

row.createCell(columnIndex).setCellValue("序号");

row.createCell(++columnIndex).setCellValue("规则类型");

row.createCell(++columnIndex).setCellValue("监测点名称");

row.createCell(++columnIndex).setCellValue("专业组");

row.createCell(++columnIndex).setCellValue("类型");

row.createCell(++columnIndex).setCellValue("编号");

row.createCell(++columnIndex).setCellValue("温度规则");

for (int i = 0; i
row = sheet.createRow(i + 1);

ThmsStatisticsDate entity = res.get(i);

columnIndex = 0;

row.createCell(columnIndex).setCellValue(i + 1);

if(null != entity.getRuleType()){

row.createCell(++columnIndex).setCellValue(entity.getRuleType());

}else{

row.createCell(++columnIndex).setCellValue(0);

}

if(null != entity.getMonitorPlaceName() && !"".equalsIgnoreCase(entity.getMonitorPlaceName())){

row.createCell(++columnIndex).setCellValue(entity.getMonitorPlaceName());

}else{

row.createCell(++columnIndex).setCellValue("空");

}

if(null != entity.getMajorGroup() && !"".equalsIgnoreCase(entity.getMajorGroup())){

row.createCell(++columnIndex).setCellValue(entity.getMajorGroup());

}else{

row.createCell(++columnIndex).setCellValue("空");

}

if(null != entity.getType() && !"".equalsIgnoreCase(entity.getType())){

row.createCell(++columnIndex).setCellValue(entity.getType());

}else{

row.createCell(++columnIndex).setCellValue("空");

}

if(null != entity.getNumber()){

row.createCell(++columnIndex).setCellValue(entity.getNumber().toString());

}else{

row.createCell(++columnIndex).setCellValue(0);

}

if(null != entity.getTemperatureRule() && !"".equalsIgnoreCase(entity.getTemperatureRule().toString())){

row.createCell(++columnIndex).setCellValue(entity.getTemperatureRule());

}else{

row.createCell(++columnIndex).setCellValue("空");

}

}

sheet.setDefaultRowHeight((short) (16.5 * 20));

//列宽自适应

for (int i = 0; i <= 11; i++) {

sheet.autoSizeColumn(i);

}

String title= "tongji";

response.setHeader("Content-disposition", "attachment;fileName=" + title + ".xls");

response.setContentType("application/octet-stream;charset=utf-8");

OutputStream ouputStream = response.getOutputStream();

wb.write(ouputStream);

ouputStream.flush();

ouputStream.close();

}catch (Exception e){

log.info("程序报错" + e);

}