前言
最近在項目中遇到一個需求,需要后端提供一個下載Csv和Excel表格的接口。這個接口接收前端的查詢參數,針對這些參數對數據庫做查詢操作。將查詢到的結果生成Excel和Csv文件,再以字節流的形式返回給前端。
前端拿到這個流文件之后,最開始用ajax來接收,但是前端發送的請求卻被瀏覽器cancel掉了。后來發現,發展了如此之久的Ajax居然不支持流文件下載。后來前端換成了最原始的XMLHttpRequest,才修復了這個問題。
首先給出項目源碼的地址。這是源碼,歡迎大家star或者提MR。
Csv
新建controller
先來一個簡單的例子。首先在controller中新建這樣一個接口。
@GetMapping("csv")
public void csv(
HttpServletRequest request,
HttpServletResponse response
) throws IOException {
String fileName = this.getFileName(request, "測試數據.csv");
response.setContentType(MediaType.APPLICATION_OCTET_STREAM.toString());
response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\";");
LinkedHashMap<String, Object> header = new LinkedHashMap<>();
LinkedHashMap<String, Object> body = new LinkedHashMap<>();
header.put("1", "姓名");
header.put("2", "年齡");
List<LinkedHashMap<String, Object>> data = new ArrayList<>();
body.put("1", "小明");
body.put("2", "小王");
data.add(header);
data.add(body);
data.add(body);
data.add(body);
FileCopyUtils.copy(ExportUtil.exportCSV(data), response.getOutputStream());
}
其中this.getFileName(request, "測試數據.csv")函數是用來獲取導出文件名的函數。單獨提出來是因為不同瀏覽器使用的默認的編碼不同。例如,如果使用默認的UTF-8編碼。在chrome瀏覽器中下載會出現中文亂碼。代碼如下。
private String getFileName(HttpServletRequest request, String name) throws UnsupportedEncodingException {
String userAgent = request.getHeader("USER-AGENT");
return userAgent.contains("Mozilla") ? new String(name.getBytes(), "ISO8859-1") : name;
}
response.getOutputStream()則是用於創建字節輸出流,在導出csv文件的controller代碼結尾,通過工具類中的復制文件函數將字節流寫入到輸出流中,從而將csv文件以字節流的形式返回給客戶端。
當前端通過http請求訪問服務器接口的時候,http中的所有的請求信息都會封裝在HttpServletRequest對象中。例如,你可以通過這個對象獲取到請求的URL地址,請求的方式,請求的客戶端IP和完整主機名,Web服務器的IP和完整主機名,請求行中的參數,獲取請求頭的參數等等。
針對每一次的HTTP請求,服務器會自動創建一個HttpServletResponse對象和請求對象相對應。響應對象可以對當前的請求進行重定向,自定義響應體的頭部,設置返回流等等。
新建導出工具類
我們新建一個導出工具類,來專門負責導出各種格式的文件。代碼如下。
public class ExportUtil {
public static byte[] exportCSV(List<LinkedHashMap<String, Object>> exportData) {
ByteArrayOutputStream out = new ByteArrayOutputStream();
BufferedWriter buffCvsWriter = null;
try {
buffCvsWriter = new BufferedWriter(new OutputStreamWriter(out, StandardCharsets.UTF_8));
// 將body數據寫入表格
for (Iterator<LinkedHashMap<String, Object>> iterator = exportData.iterator(); iterator.hasNext(); ) {
fillDataToCsv(buffCvsWriter, iterator.next());
if (iterator.hasNext()) {
buffCvsWriter.newLine();
}
}
// 刷新緩沖
buffCvsWriter.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
// 釋放資源
if (buffCvsWriter != null) {
try {
buffCvsWriter.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return out.toByteArray();
}
private static void fillDataToCsv(BufferedWriter buffCvsWriter, LinkedHashMap row) throws IOException {
Map.Entry propertyEntry;
for (Iterator<Map.Entry> propertyIterator = row.entrySet().iterator(); propertyIterator.hasNext(); ) {
propertyEntry = propertyIterator.next();
buffCvsWriter.write("\"" + propertyEntry.getValue().toString() + "\"");
if (propertyIterator.hasNext()) {
buffCvsWriter.write(",");
}
}
}
}
fillDataToCsv主要是抽離出來為csv填充一行一行的數據的。
運行
然后運行項目,調用http://localhost:8080/csv,就可以下載示例的csv文件。示例如下。

Excel
新建controller
新建下載xlsx文件的接口。
@GetMapping("xlsx")
public void xlsx(
HttpServletRequest request,
HttpServletResponse response
) throws IOException {
String fileName = this.getFileName(request, "測試數據.xlsx");
response.setContentType(MediaType.APPLICATION_OCTET_STREAM.toString());
response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\";");
List<LinkedHashMap<String, Object>> datas = new ArrayList<>();
LinkedHashMap<String, Object> data = new LinkedHashMap<>();
data.put("1", "姓名");
data.put("2", "年齡");
datas.add(data);
for (int i = 0; i < 5; i++) {
data = new LinkedHashMap<>();
data.put("1", "小青");
data.put("2", "小白");
datas.add(data);
}
Map<String, List<LinkedHashMap<String, Object>>> tableData = new HashMap<>();
tableData.put("日報表", datas);
tableData.put("周報表", datas);
tableData.put("月報表", datas);
FileCopyUtils.copy(ExportUtil.exportXlsx(tableData), response.getOutputStream());
}
補充工具類
上面新建的導出工具類中,只有導出csv的函數,接下來我們要添加導出xlsx的函數。
public static byte[] exportXlsx(Map<String, List<LinkedHashMap<String, Object>>> tableData) {
ByteArrayOutputStream out = new ByteArrayOutputStream();
try {
HSSFWorkbook workbook = new HSSFWorkbook();
// 創建多個sheet
for (Map.Entry<String, List<LinkedHashMap<String, Object>>> entry : tableData.entrySet()) {
fillDataToXlsx(workbook.createSheet(entry.getKey()), entry.getValue());
}
workbook.write(out);
} catch (IOException e) {
e.printStackTrace();
}
return out.toByteArray();
}
/**
* 將linkedHashMap中的數據,寫入xlsx表格中
*
* @param sheet
* @param data
*/
private static void fillDataToXlsx(HSSFSheet sheet, List<LinkedHashMap<String, Object>> data) {
HSSFRow currRow;
HSSFCell cell;
LinkedHashMap row;
Map.Entry propertyEntry;
int rowIndex = 0;
int cellIndex = 0;
for (Iterator<LinkedHashMap<String, Object>> iterator = data.iterator(); iterator.hasNext(); ) {
row = iterator.next();
currRow = sheet.createRow(rowIndex++);
for (Iterator<Map.Entry> propertyIterator = row.entrySet().iterator(); propertyIterator.hasNext(); ) {
propertyEntry = propertyIterator.next();
if (propertyIterator.hasNext()) {
String value = String.valueOf(propertyEntry.getValue());
cell = currRow.createCell(cellIndex++);
cell.setCellValue(value);
} else {
String value = String.valueOf(propertyEntry.getValue());
cell = currRow.createCell(cellIndex++);
cell.setCellValue(value);
break;
}
}
if (iterator.hasNext()) {
cellIndex = 0;
}
}
}
fillDataToXlsx的用途與csv一樣,為xlsx文件的每一行刷上數據。
運行
然后運行項目,調用http://localhost:8080/xlsx,就可以下載示例的csv文件。示例如下。

項目地址
最后再次給出項目地址,大家如果沒有理解到其中的一些地方,不妨把項目clone下來,自己親自操作一波。
參考
這是在解決請求被瀏覽器cancel掉的過程中,很重要的一個參考,分享給大家。
