c 前端怎么导出excel

如何在前端导出Excel：使用库、创建数据表、格式化数据

在前端导出Excel文件是一个常见的需求，尤其是在处理数据密集型的应用时。使用库、创建数据表、格式化数据是实现这一功能的关键步骤。通过使用第三方库如SheetJS、创建数据表并进行数据格式化，可以轻松实现Excel文件的导出。本文将详细介绍如何在前端导出Excel文件，包括选择合适的库、数据准备、格式化处理等。

一、选择合适的库

SheetJS（xlsx）

SheetJS是一个非常流行的JavaScript库，用于解析和编写各种电子表格格式。它支持多种格式，如.xlsx、.csv、.ods等。SheetJS的API非常丰富，可以满足大多数导出Excel的需求。

// 安装SheetJS npm install xlsx --save

FileSaver.js

FileSaver.js是一个用于在浏览器中生成和保存文件的库。它通常与其他库一起使用，如SheetJS，用于将生成的文件保存到本地。

// 安装FileSaver.js npm install file-saver --save

js-xlsx

js-xlsx是SheetJS的一个变种，提供了更简洁的API，但功能略少。适合需要快速实现基本功能的场景。

// 安装js-xlsx npm install js-xlsx --save

各库优缺点对比

SheetJS：功能强大，支持多种格式，适合复杂需求。
FileSaver.js：仅用于保存文件，需要与其他库结合使用。
js-xlsx：API简洁，功能较少，适合简单需求。

二、创建数据表

数据准备

在导出Excel文件之前，需要准备好要导出的数据。通常，数据以JSON格式存储，并需要转换为适合Excel表格的数据结构。

const data = [
    { name: "John", age: 30, city: "New York" },
    { name: "Anna", age: 22, city: "London" },
    { name: "Mike", age: 32, city: "Chicago" }
];

数据转换

使用SheetJS将JSON数据转换为工作表对象。

import * as XLSX from 'xlsx';
const ws = XLSX.utils.json_to_sheet(data);

创建工作簿

将工作表对象添加到工作簿中。

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

三、格式化数据

设置单元格样式

可以使用SheetJS的API设置单元格的样式，如字体、颜色、对齐方式等。

ws['A1'].s = {
    font: {
        name: 'Arial',
        sz: 14,
        bold: true,
        color: { rgb: "FF0000" }
    },
    alignment: {
        horizontal: "center",
        vertical: "center"
    }
};

合并单元格

在某些情况下，可能需要合并单元格以创建更复杂的表格布局。

ws['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } // 合并A1和B1
];

设置列宽

可以根据内容设置列宽，以确保数据的可读性。

ws['!cols'] = [
    { wpx: 100 }, // 第一列宽度为100像素
    { wpx: 150 }  // 第二列宽度为150像素
];

四、导出Excel文件

使用SheetJS导出

使用SheetJS的API将工作簿转换为二进制数据，并使用FileSaver.js保存文件。

import { saveAs } from 'file-saver';
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}
saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "data.xlsx");

使用js-xlsx导出

如果使用js-xlsx库，过程类似，但API略有不同。

import XLSX from 'js-xlsx';
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, 'data.xlsx');

五、处理大型数据集

分页处理

当数据集非常大时，可以考虑分页处理，以减少内存消耗和提高性能。

const pageSize = 1000;
const pageCount = Math.ceil(data.length / pageSize);
for (let i = 0; i < pageCount; i++) {
    const pageData = data.slice(i * pageSize, (i + 1) * pageSize);
    const ws = XLSX.utils.json_to_sheet(pageData);
    XLSX.utils.book_append_sheet(wb, ws, `Sheet${i + 1}`);
}

使用Web Worker

在主线程中处理大型数据集可能会导致UI卡顿。可以使用Web Worker将数据处理移到后台。

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
    const wb = e.data;
    XLSX.writeFile(wb, 'data.xlsx');
};

六、处理特殊数据类型

日期

在处理日期类型的数据时，通常需要进行格式化处理。

data.forEach(item => {
    item.date = new Date(item.date).toLocaleDateString();
});
const ws = XLSX.utils.json_to_sheet(data);

数字格式

可以使用SheetJS的API设置单元格的数字格式，如货币、百分比等。

ws['A1'].z = '$0.00'; // 设置A1单元格为货币格式

文本格式

对于长文本，可以设置单元格的换行和自动换行属性。

ws['A1'].s = {
    alignment: {
        wrapText: true
    }
};

七、总结

通过选择合适的库、创建数据表、格式化数据，可以轻松地在前端导出Excel文件。SheetJS、FileSaver.js、数据转换、单元格样式设置等步骤都是实现这一功能的关键。希望本文能对你有所帮助，使你在前端开发中更好地处理Excel文件的导出问题。如果你有更复杂的需求或遇到问题，建议查阅相关库的文档或寻求社区的帮助。