企业官网建设流程全解析

1. 前端网页数据转存Excel的格式保持难题

在Web开发中，将表格数据导出为Excel文件是常见的需求。但很多开发者都遇到过这样的困扰：精心设计的网页表格样式，在导出Excel后变得面目全非。单元格合并失效、颜色样式丢失、字体大小不统一等问题频频出现。

这个问题的根源在于Excel文件格式的特殊性。当我们使用前端库导出Excel时，通常生成的是CSV或基础XLS/XLSX文件。CSV本质是纯文本，完全不支持样式；而XLS/XLSX虽然支持样式，但需要特定的格式标记和结构定义。

2. 主流技术方案对比

2.1 纯前端解决方案

SheetJS (xlsx.js)这是目前最强大的纯前端Excel处理库。它支持：

• 完整的单元格样式定义（字体、颜色、边框等）
• 单元格合并
• 公式计算
• 多工作表操作

// 使用SheetJS设置样式示例 const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data); // 设置单元格样式 worksheet["A1"].s = { font: { bold: true, color: { rgb: "FF0000" } }, fill: { fgColor: { rgb: "FFFF00" } }, alignment: { horizontal: "center" } }; XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, "styled_data.xlsx");

ExcelJS另一个强大的库，特别适合需要复杂样式和大型文件处理的场景：

• 支持流式写入（适合大数据量）
• 更直观的API设计
• 完善的文档和类型定义

2.2 服务端辅助方案

当数据量较大或需要更复杂的格式控制时，可以考虑服务端生成：

Node.js方案

const Excel = require('exceljs'); const workbook = new Excel.Workbook(); const worksheet = workbook.addWorksheet('My Sheet'); // 设置列宽 worksheet.columns = [ { header: 'ID', width: 10 }, { header: 'Name', width: 32 } ]; // 设置行样式 worksheet.getRow(1).font = { bold: true }; worksheet.getRow(1).alignment = { vertical: 'middle', horizontal: 'center' }; // 生成文件 await workbook.xlsx.writeFile('output.xlsx');

PHP方案使用PhpSpreadsheet库：

$spreadsheet = new \PhpOffice\PhpSpreadsheet\Spreadsheet(); $sheet = $spreadsheet->getActiveSheet(); // 设置样式 $sheet->getStyle('A1:D1')->applyFromArray([ 'font' => ['bold' => true], 'alignment' => ['horizontal' => 'center'] ]); // 输出文件 $writer = new \PhpOffice\PhpSpreadsheet\Writer\Xlsx($spreadsheet); $writer->save('output.xlsx');

3. 样式保持的关键技术点

3.1 单元格样式映射

网页CSS样式需要正确映射到Excel的样式属性：

3.2 复杂布局处理

单元格合并

// SheetJS实现合并 worksheet["!merges"] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } } // 合并A1到D1 ]; // ExcelJS实现 worksheet.mergeCells('A1:D1');

条件格式

// ExcelJS条件格式示例 worksheet.addConditionalFormatting({ ref: 'B2:B100', rules: [ { type: 'cellIs', operator: 'greaterThan', formulae: [100], style: { fill: { type: 'pattern', pattern:'solid', fgColor: {argb:'FFFF0000'} } } } ] });

4. 实战案例：完整导出流程

4.1 准备工作

安装依赖：

npm install xlsx exceljs file-saver

4.2 实现代码

import { saveAs } from 'file-saver'; import * as XLSX from 'xlsx'; import ExcelJS from 'exceljs'; // 方法1：使用SheetJS export function exportWithSheetJS(data, headers, fileName = 'export.xlsx') { const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data, { header: headers }); // 设置标题行样式 headers.forEach((_, i) => { const cellRef = XLSX.utils.encode_cell({ r: 0, c: i }); worksheet[cellRef].s = { font: { bold: true, color: { rgb: "FFFFFF" } }, fill: { fgColor: { rgb: "4472C4" } }, alignment: { horizontal: "center" } }; }); // 设置列宽 worksheet['!cols'] = headers.map(() => ({ width: 20 })); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, fileName); } // 方法2：使用ExcelJS（适合更复杂的样式） export async function exportWithExcelJS(data, headers, fileName = 'export.xlsx') { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); // 添加标题行 worksheet.addRow(headers); // 设置标题样式 const headerRow = worksheet.getRow(1); headerRow.font = { bold: true, color: { argb: 'FFFFFFFF' } }; headerRow.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4472C4' } }; headerRow.alignment = { vertical: 'middle', horizontal: 'center' }; // 添加数据 data.forEach(item => { worksheet.addRow(headers.map(key => item[key])); }); // 设置列宽 worksheet.columns = headers.map(() => ({ width: 20 })); // 生成文件 const buffer = await workbook.xlsx.writeBuffer(); saveAs(new Blob([buffer]), fileName); }

4.3 样式优化技巧

1. 字体一致性处理

// 设置全局默认字体 worksheet.properties.defaultRowHeight = 20; worksheet.eachRow(row => { row.font = { name: 'Arial', size: 11 }; });

2. 斑马线效果

data.forEach((_, index) => { if (index % 2 === 0) { const row = worksheet.getRow(index + 2); row.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFF2F2F2' } }; } });

3. 自动调整列宽

worksheet.columns.forEach(column => { let maxLength = 0; column.eachCell({ includeEmpty: true }, cell => { const columnLength = cell.value ? cell.value.toString().length : 0; if (columnLength > maxLength) { maxLength = columnLength; } }); column.width = Math.min(Math.max(maxLength + 2, 10), 50); });

5. 常见问题与解决方案

5.1 中文乱码问题

现象：导出的Excel打开后中文显示为乱码。

解决方案：

1. 确保文件以UTF-8编码保存
2. 在HTML中添加meta标签：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

3. 对于CSV文件，可以在文件开头添加BOM头：

const BOM = "\uFEFF"; const csvContent = BOM + csvString;

5.2 日期格式丢失

现象：日期显示为数字或格式不正确。

解决方案：

// SheetJS处理日期 worksheet["A1"].z = "yyyy-mm-dd"; worksheet["A1"].v = new Date(); // ExcelJS处理日期 cell.value = new Date(); cell.numFmt = 'yyyy-mm-dd';

5.3 性能优化

当数据量较大时（超过1万行），建议：

1. 使用流式写入（ExcelJS支持）
2. 分批次处理数据
3. 在Web Worker中执行导出操作

// ExcelJS流式写入示例 const workbook = new ExcelJS.stream.xlsx.WorkbookWriter({ filename: 'large-file.xlsx' }); const worksheet = workbook.addWorksheet('Sheet1'); for (let i = 0; i < largeData.length; i++) { worksheet.addRow(largeData[i]).commit(); } worksheet.commit(); await workbook.commit();

6. 高级技巧

6.1 保留HTML富文本

如果需要将包含HTML格式的文本导出到Excel并保留格式：

function htmlToExcelText(html) { const div = document.createElement('div'); div.innerHTML = html; // 提取文本并保留基本格式 return { richText: [ { font: { bold: div.querySelector('b,strong') ? true : false }, text: div.textContent } ] }; } // ExcelJS中使用 cell.value = htmlToExcelText("<b>重要</b>通知");

6.2 添加数据验证

worksheet.getCell('B2').dataValidation = { type: 'list', allowBlank: true, formulae: ['"选项1,选项2,选项3"'] };

6.3 冻结窗格

worksheet.views = [ { state: 'frozen', xSplit: 1, ySplit: 1 } ];

在实际项目中，我通常会创建一个通用的Excel导出工具类，封装这些常用功能。根据项目需求，可以选择纯前端方案或服务端方案。对于常规管理后台，SheetJS通常足够使用；而对于复杂的报表系统，建议使用ExcelJS或服务端方案。