前端生成excel文件

前端可以使用现成的库或插件来生成Excel文件，最常用的是js-xlsx和exceljs。以下是使用js-xlsx生成Excel文件的示例代码：

// 创建工作簿
var workbook = XLSX.utils.book_new();
// 创建工作表
var worksheet = XLSX.utils.json_to_sheet([
  { Name: "John", Age: 30 },
  { Name: "Jane", Age: 25 }
]);
// 添加工作表到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// 将工作簿保存为Excel文件
XLSX.writeFile(workbook, "data.xlsx");

该代码使用XLSX.utils.json_to_sheet将JSON数据转换为工作表，然后使用XLSX.utils.book_append_sheet将工作表添加到工作簿中，最后使用XLSX.writeFile将工作簿保存为Excel文件。

相关问题

XLSX前端生成excel时添加背景色

要在前端生成Excel文件并添加背景色，你需要使用XLSX库中的`worksheet`对象。可以使用以下代码来设置单元格的背景色：

/* 创建worksheet */
var worksheet = XLSX.utils.json_to_sheet([
  { Name: "John", Age: 30 },
  { Name: "Jane", Age: 25 },
]);

/* 设置单元格样式 */
worksheet["A1"].s = { fill: { bgColor: { rgb: "FFFF0000" } } };

/* 将worksheet添加到workbook中 */
var workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

/* 生成Excel文件 */
XLSX.writeFile(workbook, "example.xlsx");

在上面的代码中，我们首先创建了一个`worksheet`对象，并使用`json_to_sheet`方法将数据转换为工作表。然后，我们使用`s`属性来设置单元格`A1`的样式，其中`s`属性是一个包含各种样式属性的对象。在此示例中，我们使用`fill`属性来设置单元格的背景色，该属性包含一个`bgColor`属性，用于指定背景颜色的RGB值。最后，我们将`worksheet`添加到`workbook`中，并使用`writeFile`方法将其保存为Excel文件。

需要注意的是，此方法仅在生成的Excel文件中显示背景色，而不会在Excel应用程序中显示背景色。

前端下载EXCEL文件，后端返回文件流的处理

前端下载 Excel 文件，后端需要返回文件流，可以按照以下步骤进行处理：

1. 后端根据前端请求参数，生成 Excel 文件，并将文件流返回给前端。

2. 前端通过 AJAX 发送请求，请求后端生成 Excel 文件的接口。

3. 后端在接收到请求后，使用相关的库（如 Apache POI）生成 Excel 文件，并将文件流返回给前端。

4. 前端在接收到后端返回的文件流后，使用 Blob 对象创建一个 URL，并将该 URL 赋给一个 a 标签的 href 属性。

5. 前端再使用 JavaScript 触发该 a 标签的 click 事件，即可下载 Excel 文件。

以下是一个示例的后端代码，使用了 Spring Boot 和 Apache POI 库：

@GetMapping("/downloadExcel")
public ResponseEntity<byte[]> downloadExcel() throws IOException {
    // 创建 Excel 工作簿
    Workbook workbook = new XSSFWorkbook();
    Sheet sheet = workbook.createSheet("Sheet1");

    // 创建表头
    Row header = sheet.createRow(0);
    header.createCell(0).setCellValue("姓名");
    header.createCell(1).setCellValue("年龄");

    // 创建数据行
    Row dataRow = sheet.createRow(1);
    dataRow.createCell(0).setCellValue("张三");
    dataRow.createCell(1).setCellValue(20);

    // 将 Excel 文件写入字节数组输出流
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    workbook.write(outputStream);

    // 设置响应头
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-Disposition", "attachment;filename=test.xlsx");
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

    // 返回响应实体
    return new ResponseEntity<>(outputStream.toByteArray(), headers, HttpStatus.OK);
}

在前端中，可以使用以下代码实现下载：

axios.get('/downloadExcel', { responseType: 'blob' }).then(res => {
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'test.xlsx'
    a.click()
    URL.revokeObjectURL(url)
})