CSDN链接：https://blog.csdn.net/sinat_27537929/article/details/98059599
需求
- 前端发送下载请求
- 后端接收请求，从数据库拿出数据，写成excel格式，传给前端
- 前端拿到excel进行下载
- 在excel中增加数据
- 将新的excel上传给服务器
环境
- 前端vue+ElementUI
- 后端springboot+mybatisplus+mysql
- 后端生成excel用到org.apache.poi
下载
html
<el-button type="primary" @click="exportWord" icon="el-icon-download" plain>导出</el-button>
js
exportWord () { this.$axios.post('/web/xxxxxx/export', {}, { responseType: 'blob' }).then(res => { let blob = new Blob([res.data], { type: 'application/ms-excel;charset=utf-8' }); let downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.href = href; downloadElement.download = 'forbidden-words.xls'; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 }) }
controller
@PostMapping("/export")
public void exportXXXXXXWords(HttpServletResponse response) {
List<ForbiddenWord> forbiddenList;
try {
// get your data
wordList = wordService.getWords();
// 设置excel第一行的标题
String[] titleRow = new String[]{"单词", "级别"};
List<String[]> data = new LinkedList<String[]>();
data.add(0, titleRow);
for (int i = 0; i < wordList.size(); i++) {
Word word = wordList.get(i);
data.add(new String[]{
word.getWord(),
word.getLevel().toString()
});
}
Map<String, List<String[]>> exportData = new HashMap<String, List<String[]>>();
// 设置sheet的名称
exportData.put("Your sheet name", data);
String strResult = FileUtils.createExcelFile(response, exportData);
} catch (Exception e) {
e.printStackTrace();
}
}
FileUtils
/** * 直接生成文件流返回给前端 * * @param response * @param exportData * @return */ public static String createExcelFile(HttpServletResponse response, Map<String, List<String[]>> exportData) { OutputStream outputStream = null; try { Workbook wb = new HSSFWorkbook(); for (String sheetName : exportData.keySet()) { Sheet sheet = wb.createSheet(sheetName); List<String[]> rowData = exportData.get(sheetName); for (int i = 0; i < rowData.size(); i++) { String[] cellData = rowData.get(i); Row row = sheet.createRow(i); for (int j = 0; j < cellData.length; j++) { Cell cell = row.createCell(j); cell.setCellValue(cellData[j]); } } } response.setContentType("application/vnd.ms-excel;charset=utf-8"); response.flushBuffer(); outputStream = response.getOutputStream(); wb.write(outputStream); } catch (IOException ex) { ex.printStackTrace(); return "failure"; } finally { try { if (outputStream != null) { outputStream.flush(); outputStream.close(); } } catch (IOException e) { e.printStackTrace(); } } return "success"; }
上传
首先，因为公司封装了axios，每次发送都需要带着token等数据，所以不能直接用ElementUI中el-upload组件的action。
el-upload中有个属性http-request：覆盖默认的上传行为，可以自定义上传的实现，接收类型是function，就是他了。
这里我用了auto-upload="false"这个属性，即“是否在选取文件后立即进行上传”选择不立即上传，所以多了一个按钮来实现点击触发上传。
html
<el-upload ref="upload" action :multiple="false" :file-list="fileList" :auto-upload="false" :limit="1" :http-request="importWordConfirm" > <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" plain >上传到服务器</el-button> </el-upload>
js
submitUpload () { this.$refs.upload.submit(); }, importWordConfirm (item) { const fileObj = item.file const formData = new FormData() formData.append('file', fileObj) this.$axios.post('/web/xxxxxx/import', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(res => { // do something }) }
controller
@PostMapping("/import")
public ApiResult importXXXXXXWords(
@RequestParam("file") MultipartFile uploadFile,
HttpServletRequest request) throws Exception {
try {
if (uploadFile == null) {
//判断文件大小
return failure("-1", "文件不存在");
}
// 构造临时路径来存储上传的文件
// 这个路径相对当前应用的目录
// Constant.UPLOAD_DIRECTORY是你自己存放文件的文件夹
String uploadPath = request.getServletContext().getRealPath("/")
+ File.separator + Constant.UPLOAD_DIRECTORY;
//如果目录不存在则创建
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
String fileName = uploadFile.getOriginalFilename();
String originalFileName = fileName
.substring(0, fileName.lastIndexOf("."));
//获取文件名后缀
String suffix = fileName
.substring(fileName.lastIndexOf("."));
String newFileName = originalFileName
+ "_" + UUID.randomUUID().toString() + suffix;
File file = new File(uploadPath, newFileName);
try {
uploadFile.transferTo(file);
} catch (Exception e) {
e.printStackTrace();
}
List<String[]> fileData = null;
if (suffix.equals(".xls")) {
fileData = FileUtils.readXlsFile(file.getAbsolutePath());
} else if (suffix.equals(".xlsx")) {
fileData = FileUtils.readXlsxFile(file.getAbsolutePath());
} else {
return failure("-2", "文件格式不正确");
}
// do something
return success("解析文件成功");
} catch (Exception e) {
e.printStackTrace();
return failure("-1", "更新有误");
}
}
FileUtils
public static List<String[]> readXlsFile(String filePath) { HSSFWorkbook workbook = null; List<String[]> list = new LinkedList<String[]>(); try { workbook = new HSSFWorkbook(new FileInputStream(filePath)); HSSFSheet sheet = workbook.getSheetAt(0); int rowNumber = sheet.getLastRowNum(); for (int i = 0; i < rowNumber + 1; i++) { HSSFRow row = sheet.getRow(i); int lastCellNum = row.getLastCellNum(); String[] cells = new String[lastCellNum]; for (int j = 0; j < lastCellNum; j++) { HSSFCell cell = row.getCell(j); if (cell != null) { cells[j] = cell.toString(); } else { cells[j] = ""; } } list.add(cells); } } catch (Exception e) { e.printStackTrace(); } //删除标题 list.remove(0); return list; } public static List<String[]> readXlsxFile(String filePath) { XSSFWorkbook workbook = null; List<String[]> list = new LinkedList<String[]>(); try { workbook = new XSSFWorkbook(new FileInputStream(filePath)); XSSFSheet sheet = workbook.getSheetAt(0); int rowNumber = sheet.getLastRowNum(); for (int i = 0; i < rowNumber + 1; i++) { XSSFRow row = sheet.getRow(i); int lastCellNum = row.getLastCellNum(); String[] cells = new String[lastCellNum + 1]; for (int j = 0; j < lastCellNum; j++) { XSSFCell cell = row.getCell(j); cells[j] = cell.toString(); } list.add(cells); } } catch (Exception e) { e.printStackTrace(); } //删除标题 list.remove(0); return list; }
这里还要说两个小插曲...
- 当时我想console.log(formData)，结果发现console的结果是{}，我以为没有数据...后来看了别人的文章发现应该这么用：console.log(formData.get('xxx'))
- 由于公司封装了axios，然后每次post我都发现不太对...原来公司设置的http request拦截器默认把post的Content-Type都改成了'application/x-www-form-urlencoded; charset=UTF-8'...可是，我需要'Content-Type': 'multipart/form-data'啊！！！然后默默地在拦截器里加了个判断...
注意：还需要配置如下内容
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.multipart.MultipartResolver; import org.springframework.web.multipart.commons.CommonsMultipartResolver; @Configuration public class MultipartResolverConfig { @Bean(name = "multipartResolver") public MultipartResolver multipartResolver(){ CommonsMultipartResolver resolver = new CommonsMultipartResolver(); //上传文件大小 10M 10*1024*1024 resolver.setMaxUploadSize(10*1024*1024); resolver.setDefaultEncoding("UTF-8"); return resolver; } }
request.getServletContext().getRealPath("/") + File.separator + Constant.UPLOAD_DIRECTORY
C:\Users\Lenovo\AppData\Local\Temp\tomcat-docbase.4936602277910733153.9510\file
request.getContextPath() + File.separator + Constant.UPLOAD_DIRECTORY
D:\file
System.getProperty("user.dir") + File.separator + Constant.UPLOAD_DIRECTORY
D:\myfolder\code\ant-api\file
参考：
使用ElementUI中的upload组件上传Excel文件
vue项目中实现下载后端返回的excel数据表格
Spring boot实现导出数据生成excel文件返回
萌新用vue + axios + formdata 上传文件的爬坑之路
链接：https://www.jianshu.com/p/154ba49d9b7a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。