前端 - xlsx-js-style的单元格怎么写富文本html？

Question

前端渲染表格下载，需要满足单元格中部分文字有颜色，怎么实现？
我看到官方文档有提及Cell Objects支持h（HTML rendering of the rich text (if applicable)），但是type并没有富文本类型，怎么处理？

Answer 1

在 `xlsx-js-style` 中直接支持富文本 HTML 渲染的功能是比较有限的。虽然 `Cell Objects` 的确有一个 `h` 属性用于 HTML 渲染（`h: HTML rendering of the rich text (if applicable)`），但是 `xlsx-js-style` 本身并不原生支持将 HTML 直接嵌入到 Excel 单元格中。Excel 的单元格内容格式是基于富文本字符串（Rich Text Strings），而不是直接的 HTML。

要在 Excel 单元格中实现部分文字有颜色的效果，你需要使用 Excel 的富文本字符串功能。`xlsx-js-style` 提供了一定的支持来创建这些富文本字符串，但你需要手动构建这些富文本对象。

以下是一个基本的例子，展示如何使用 `xlsx-js-style` 来设置单元格中部分文字的颜色：

const XLSX = require('xlsx-style');
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet([["Hello", "World"]]);

// 创建一个富文本对象
const richText = XLSX.utils.rich_text_from_string({

strings: ["Hello", " ", "World"],
fonts: [
    { color: { rgb: "FF0000" }, bold: true },  // 红色，加粗
    { color: { rgb: "000000"} },              // 黑色，默认
    { color: { rgb: "00FF00" } }              // 绿色
],
bolds: [true, false, false]

});

// 将富文本对象应用到单元格
ws['A1'].s = { richText: richText };

XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, 'example.xlsx');

在这个例子中，我们创建了一个包含三个部分的富文本字符串："Hello"、" "（空格）、和 "World"，并分别为它们设置了不同的颜色。注意，`fonts` 数组中的每个对象定义了对应字符串部分的字体样式，而 `bolds` 数组用于指定哪些部分是加粗的。

然而，这种方法的灵活性有限，并且不支持像 HTML 那样复杂的格式。如果你需要更复杂的格式，你可能需要考虑其他方法，如使用服务器端库生成 Excel 文件，或者寻找一个更强大的前端库来处理这种需求。

目前，`xlsx-js-style` 的文档和功能可能还没有达到直接支持 HTML 嵌入单元格的程度，因此你可能需要手动处理这些富文本需求。