Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to achieve front and back-end separation of excel download by Springboot". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Springboot front and back end separate excel download

Now the company's technology stack is springboot as the back end, the front end is vue, now we want to do the export function of excel, which has not been done before, write down.

The springboot version is 2.0.6 poi 3.14, jdk1.8

The annotation above the class is: @ RestController

/ * Export excel * * / @ GetMapping ("export") public void exportExcel () {XSSFWorkbook workbook = placeStatService.exportExcel (); / / set the file name of the generated Excel and encode String fileName = null in Chinese Try {fileName = URLEncoder.encode ("Room reservation usage statistics" + ".xlsx", "utf-8"). ReplaceAll ("\\ +", "% 20");} catch (UnsupportedEncodingException e) {e.printStackTrace ();} response.setCharacterEncoding ("UTF-8"); response.setHeader ("Content-type", "application/vnd.ms-excel") Response.setHeader ("Content-Disposition", "attachment;filename=" + fileName); / / response type, encoding response.setContentType ("application/octet-stream;charset=UTF-8"); try {/ / forms the output stream OutputStream osOut = response.getOutputStream (); / / writes the specified bytes to this output stream workbook.write (osOut) / / refresh this output stream and force all buffered output bytes to be written out of osOut.flush (); / / close the stream osOut.close (); workbook.close ();} catch (IOException e) {e.printStackTrace ();}} @ Override public XSSFWorkbook exportExcel) {List roomOrdersList = getRoomOrderList () XSSFWorkbook data = ExcelUtil.setExcelData (roomOrdersList); return data;} package com.util; import com.curefun.place.model.RoomOrderDetailModel;import org.apache.poi.ss.usermodel.HorizontalAlignment;import org.apache.poi.ss.usermodel.VerticalAlignment;import org.apache.poi.xssf.usermodel.XSSFCell;import org.apache.poi.xssf.usermodel.XSSFCellStyle;import org.apache.poi.xssf.usermodel.XSSFRow;import org.apache.poi.xssf.usermodel.XSSFSheet;import org.apache.poi.xssf.usermodel.XSSFWorkbook Import java.text.SimpleDateFormat;import java.util.Date;import java.util.List; / * * @ author excel utility class. Export function * / public class ExcelUtil {/ * data export, get an excel object * * @ param * / public static XSSFWorkbook setExcelData (List orderDetailModels) {/ / create a book corresponding to an Excel file XSSFWorkbook workbook = new XSSFWorkbook () / / add a sheet to book, corresponding to sheet XSSFSheet sheet = workbook.createSheet ("classroom reservation record") in Excel file; / / set the width of six columns sheet.setColumnWidth (0, 4000); sheet.setColumnWidth (1, 3000); sheet.setColumnWidth (2, 3800); sheet.setColumnWidth (3, 2800); sheet.setColumnWidth (4, 3200) Sheet.setColumnWidth (5, 3600); sheet.setColumnWidth (6, 2850); / / centered style XSSFCellStyle centerStyle = getCenterStyle (workbook); / / third step, add header line 0 XSSFRow row0 = sheet.createRow (0) in sheet; setFirstRow (centerStyle, row0); int rowNum = 1 For (RoomOrderDetailModel model: orderDetailModels) {XSSFRow row = sheet.createRow (rowNum); row.createCell (0) .setCellValue (rowNum); rowNum++; row.createCell (1) .setCellValue (model.getBuildingName ()); row.createCell (2) .setCellValue (model.getRoomNo ()); row.createCell (3) .setCellValue (model.getRoomName ()) Row.createCell (4) .setCellValue (model.getEventType ()); row.createCell (5) .setCellValue (model.getEventName ()); row.createCell (6) .setCellValue (model.getUserRealName ());} return workbook;} / * * get the centered style. * * @ param workbook * @ return * / private static XSSFCellStyle getCenterStyle (XSSFWorkbook workbook) {XSSFCellStyle cellStyle = workbook.createCellStyle (); / / set horizontal alignment to center alignment; cellStyle.setAlignment (HorizontalAlignment.CENTER); / / Vertical center cellStyle.setVerticalAlignment (VerticalAlignment.CENTER); return cellStyle } / * set the header of the first row * * @ param centerStyle * @ param row * / private static void setFirstRow (XSSFCellStyle centerStyle, XSSFRow row) {XSSFCell cell0 = row.createCell (0); cell0.setCellValue ("serial number"); cell0.setCellStyle (centerStyle); XSSFCell cell1 = row.createCell (1); cell1.setCellValue ("Building Information") Cell1.setCellStyle (centerStyle); XSSFCell cell2 = row.createCell (2); cell2.setCellValue ("Room number"); cell2.setCellStyle (centerStyle); XSSFCell cell3 = row.createCell (3); cell3.setCellValue ("Room name"); cell3.setCellStyle (centerStyle); XSSFCell cell4 = row.createCell (4); cell4.setCellValue (activity Type); cell4.setCellStyle (centerStyle) XSSFCell cell5 = row.createCell (5); cell5.setCellValue ("event name"); cell5.setCellStyle (centerStyle); XSSFCell cell6 = row.createCell (6); cell6.setCellValue ("user"); cell6.setCellStyle (centerStyle) / * * in fact, it will be more simple to use this method completely, and it will be easier to modify List title = Stream.of ("serial number", "major", "class", "course name", "course content", "instructor", "teaching time", "credits", "teaching room") .hours (Collectors.toList ()). For (int I = 0; I < title.size (); iTunes +) {XSSFCell cell = row.createCell (I); cell.setCellValue (title.get (I)); cell.setCellStyle (centerStyle);} * /}}

In fact, the use is very simple, that is, the file name of excel needs to be encoded, this needs to be noted, and nothing else.

The problem of garbled Excle downloads separated from the front and rear ends

Front end: vue+elementUI

Backend: springCloud

Frontend request method: ajax request this.$.ajax ({url: this.url + "/", type: 'post', data: formData, contentType: false, processData: false, xhrFields: {withCredentials: true, responseType:'arraybuffer'}) Headers: {'Access-Control-Allow-Origin':' *', "Authorization": this.ajaxRequest.getToken ()}, success: function (res, textStatus, request) {var downloadFile = document.createElement ('a') Let blob = new Blob ([res], {type: "application/vnd.ms-excel;charset=UTF-8"}); downloadFile.href = window.URL.createObjectURL (blob); console.log (request.getResponseHeader ('Content-disposition')) DownloadFile.download = decodeURI (request.getResponseHeader ('Content-disposition'). Split (' filename=') [1]); downloadFile.click (); window.URL.revokeObjectURL (downloadFile.href) }, error: function (res) {console.log (res)}})

Back-end processing: export file processing

/ / output Excel file OutputStream out = null;out = response.getOutputStream (); response.reset (); response.setCharacterEncoding ("UTF-8"); response.setHeader ("Content-disposition", "attachment;filename=" + URLEncoder.encode (fileName, "UTF8")); response.setContentType ("application/vnd.ms-excel; charset=utf-8"); / / output Excel content to generate Excel file wb.write (out) This is the end of the content of "how to separate the front and back end of Springboot for excel download". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.