vue实现文件的导出_SpringBoot+Vue实现Excel导出

环境

SpringBoot 1.5.20Vue 2.5.2

SpringBoot

• 依赖

<dependency>
<groupId>org.apache.poigroupId>
<artifactId>poi-ooxmlartifactId>
<version>4.0.1version>
dependency>

• Controller

@PostMapping(value="/exportExcelAll")
@ApiOperation(value="导出", notes="导出记录")
@ApiParam(name = "", value = "", required = false)
public void exportExcel(HttpServletRequest request,HttpServletResponse response) {
       czjlService.exportExcelAll(request,response);
}

• Service

public void exportExcelAll(HttpServletRequest request, HttpServletResponse response) {
try {

	    List records = ... 业务逻辑这里就不粘贴了，查询要导出的数据即可
	    @SuppressWarnings("resource")
	    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("操作结束时间");
	    row.createCell(++columnIndex).setCellValue("操作结果");
	    row.createCell(++columnIndex).setCellValue("结果原因描述");
	    row.createCell(++columnIndex).setCellValue("操作员IP地址");
	    row.createCell(++columnIndex).setCellValue("接口说明");for (int i = 0; i < records.size(); i++) {
		row = sheet.createRow(i + 1);
		Entity entity = records.get(i);
		columnIndex = 0;
	        row.createCell(columnIndex).setCellValue(i + 1);
	        row.createCell(++columnIndex).setCellValue(entity.getCzybh());
	        row.createCell(++columnIndex).setCellValue(entity.getCjrbh());
	        row.createCell(++columnIndex).setCellValue(entity.getGnljdz());
	        row.createCell(++columnIndex).setCellValue(entity.getLjdzfjcs());
	        row.createCell(++columnIndex).setCellValue(entity.getCzkssj());
	        row.createCell(++columnIndex).setCellValue(entity.getCzjssj());
	        row.createCell(++columnIndex).setCellValue(entity.getCzjgdm().equals("0") ? "成功" : "失败");
	        row.createCell(++columnIndex).setCellValue(entity.getJgyyms().equals("0") ? "无" : entity.getJgyyms());
	        row.createCell(++columnIndex).setCellValue(entity.getCzyip());
	        row.createCell(++columnIndex).setCellValue(entity.getJksm());
	    }
	    sheet.setDefaultRowHeight((short) (16.5 * 20));//列宽自适应for (int i = 0; i <= 11; i++) {
		sheet.autoSizeColumn(i);
	    }
	    String title= "czjl_all";
	    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 (IOException e) {
	    e.printStackTrace();
	}
    }

• 这里我们用swagger调用一下接口，可以看到还要点击Download file才可以下载文件

• vue

/**
 * 导出全部记录
 * @param vueCtx
 * @param param
 * @param callback
 */
export function exportExcelAll(vueCtx,param,callback) {
vueCtx.sendWorkOrder({
url : "/czjl/exportExcelAll",
data: param,
procgress: true,
back: callback,
responseType: 'blob'  // 表明返回服务器返回的数据类型，要加在请求头里面，否则识别不了文件流
    });
}

"primary" size="mini" @click="exportExcelAll">导出全部

exportExcelAll(){
Czjl.exportExcelAll(this,{},resp=>{
console.log(resp);
	});
},

• 用前端调接口则发现数据传输过来并没有弹出文件框下载

• 将文件流转成blob形式，创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件

/**
 * 导出全部按钮点击事件
 */
exportExcelAll(){
	Czjl.exportExcelAll(this,{},resp=>{
this.downloadFile(resp);
	});
},
/**
 * 文件导出
 */
downloadFile(data) {
if (!data) {
return
	}
const link = document.createElement('a');
let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
	link.style.display = 'none';
	link.href = URL.createObjectURL(blob);

	link.setAttribute('download', '记录信息' + '.xls');
document.body.appendChild(link);
	link.click();
document.body.removeChild(link);
},

.end