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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。