Skip to content

XLSX API

XLSX API 通过 widget.render() 返回的 app 调用:

ts
const { widget } = await OfficeSdk.openfile({ docId: "demo-xlsx", fileName: "demo.xlsx", file });
const app = await widget.mount("#office-container").render();

组件

Component说明
Document导出、缩放、编辑态和加载事件
Workbook工作表、调色板、数字格式和保护状态
Worksheet行列、冻结窗格、行高列宽
Selection当前选区内容、字体、边框、填充、对齐和数字格式
Finder查找、上一个/下一个结果、查找状态
Cursor当前鼠标/光标所在目标区域。
UndoRedo撤销、重做和可用状态

快速示例

ts
app.Document.setZoom(125);
app.Selection.setBold(true);
app.Selection.setFillColor({ r: 255, g: 242, b: 204 });
await app.Worksheet.insertRows();

app.Finder.search("收入");
app.Finder.selectNext();

事件示例:

ts
function onSelectionChange(info) {
  console.log(info);
}

app.Selection.addEventListener("SELECTION_CHANGE", onSelectionChange);

Document

方法签名返回说明
isEditing(): booleanboolean当前是否处于单元格内编辑态。
setZoom(value: number, redraw?: boolean): booleanboolean设置缩放比例;redraw 默认 true,返回底层缩放操作结果。
getZoom(): numbernumber获取缩放比例。
focusEditor(): voidvoid当前 XLSX 实现为空操作。
updateVisibleArea(): voidvoid重新绘制当前活动工作表可视区域。
exportDocument(): Promise<void>Promise<void>导出原始工作簿。
exportPdf(printOptions?: unknown): Promise<void>Promise<void>按打印配置导出 PDF。
copy(): Promise<void>Promise<void>复制当前选区。
cut(): Promise<void>Promise<void>剪切当前选区。
paste(): Promise<void>Promise<void>粘贴到当前选区。
startReadOnly(): voidvoid进入只读状态。
endReadOnly(): voidvoid退出只读状态。
isReadOnly(): booleanboolean获取当前只读状态。

示例:

ts
if (!app.Document.isEditing()) {
  app.Document.setZoom(110);
}

await app.Document.exportDocument();
await app.Document.exportPdf();

Document 支持的组件事件:

事件名payload说明
XLSX_WORKSHEET_LOADED工作表加载完成。
XLSX_END_LOADING文档加载结束。
DOCUMENT_EXPORT_READY导出完成。
DOCUMENT_EDITING_ENABLED文档进入可编辑状态。
DOCUMENT_EDITING_DISABLED文档退出可编辑状态。
XLSX_EDITING_STATUS_CHANGE(status: boolean)单元格编辑态变化。
XLSX_ZOOM_CHANGE缩放变化。
XLSX_WORKSHEET_LOADING_RATIO(ratio: number)工作表加载进度。
XLSX_FIRST_PART_LOADING首批内容加载完成。
XLSX_WORKSHEET_CHANGE({ sheetProtected?: boolean })当前工作表变化。

exportPdf(...) 需要安全上下文(例如 HTTPS 或 localhost)、window.queryLocalFonts 和本地字体访问权限。不满足条件时当前实现不会执行 PDF 导出。

Workbook

方法签名返回说明
addWorksheet(): voidvoid新增工作表。
setWorksheetName(name: string, index?: number): boolean | numberboolean | number设置工作表名称;index 不传时使用活动工作表。返回成功状态或名称校验状态码。
deleteWorksheet(index?: number): voidvoid删除工作表;index 不传时删除活动工作表。
getWorksheetName(index?: number): stringstring获取工作表名称;index 不传时读取活动工作表。
getColorPalette(): { theme: unknown[]; standard: unknown[] }{ theme; standard }获取调色板。
getCellNumberFormats(): string[]string[]获取数字格式分类列表。
getNumberFormatExample(format: string, value?: unknown, lcid?: unknown): unknownunknown获取一个数字格式示例。
getNumberFormatExamples(formats: string[], value?: unknown, lcid?: unknown): unknownunknown批量获取数字格式示例。
isWorksheetProtected(index?: number): booleanboolean判断工作表是否受保护;index 不传时检查活动工作表。

示例:

ts
app.Workbook.addWorksheet();
app.Workbook.setWorksheetName("汇总");

const name = app.Workbook.getWorksheetName();
const protectedSheet = app.Workbook.isWorksheetProtected();

const formats = app.Workbook.getCellNumberFormats();
const examples = app.Workbook.getNumberFormatExamples(["0.00", "0%"], 1234.56, "zh-CN");

Worksheet

方法签名返回说明
isFrozenPane(): booleanboolean当前是否冻结窗格。
toggleFreezePanes(): voidvoid切换冻结/取消冻结窗格。
setRowHeight(heightPt: number): Promise<unknown>Promise<unknown>设置当前行高;空值会被忽略。
insertRows(): Promise<unknown>Promise<unknown>插入行。
hideRows(): Promise<unknown>Promise<unknown>隐藏行。
unhideRows(): Promise<unknown>Promise<unknown>取消隐藏行。
deleteRows(): Promise<unknown>Promise<unknown>删除行。
insertColumns(): Promise<unknown>Promise<unknown>插入列。
setColumnWidth(nChars: number): voidvoid设置当前列宽,单位为字符宽度;空值会被忽略。
hideColumns(): Promise<unknown>Promise<unknown>隐藏列。
unhideColumns(): Promise<unknown>Promise<unknown>取消隐藏列。
deleteColumns(): Promise<unknown>Promise<unknown>删除列。
getRowHeight(row?: number | null, wsIdx?: number | null): numbernumber获取行高;不传或传 null 时读取当前上下文。
getColumnWidth(col?: number | null, wsIdx?: number | null): numbernumber获取列宽;不传或传 null 时读取当前上下文。

示例:

ts
if (!app.Worksheet.isFrozenPane()) {
  app.Worksheet.toggleFreezePanes();
}

await app.Worksheet.setRowHeight(24);
app.Worksheet.setColumnWidth(12);

const rowHeight = app.Worksheet.getRowHeight();
const colWidth = app.Worksheet.getColumnWidth();

Selection

Selection 方法作用于当前活动单元格或选区。

方法签名返回说明
clearContents(): voidvoid清空当前选区内容。
setAccountingFormat(value: AccountingFormat): Promise<unknown> | falsePromise<unknown> | false设置会计格式;格式值无效时返回 false
setUnderline(value: string): voidvoid设置下划线。
setBorder(value: BorderValue): voidvoid设置边框。
setStrikeThrough(value: boolean): voidvoid设置删除线。
setBold(value: boolean): voidvoid设置粗体。
setItalic(value: boolean): voidvoid设置斜体。
setFontSize(value: string | number): voidvoid设置字号;必须为 0 < value <= 409
setHorizontalAlignment(value: string): voidvoid设置水平对齐。
setVerticalAlignment(value: string | number): voidvoid设置垂直对齐;推荐使用字符串值。
setFontColor(value: XlsxColor): voidvoid设置字体颜色。
setFillColor(value: XlsxColor): voidvoid设置填充色。
setFontName(value: string): voidvoid设置字体。
setCellStyle(value: string): Promise<unknown>Promise<unknown>设置单元格样式。
setPercentFormat(): Promise<unknown>Promise<unknown>设置百分比格式。
setNumberFormat(value: unknown): Promise<unknown>Promise<unknown>设置数字格式。
increaseDecimalPlaces(): voidvoid增加小数位。
decreaseDecimalPlaces(): voidvoid减少小数位。
ts
type AccountingFormat = "RMB" | "Dollar" | "EUR" | "GBP" | "JPY" | "none";

type XlsxColor =
  | { r: number; g: number; b: number }
  | { theme: number; tint?: number }
  | { indexed: number }
  | { rgbHex: string };

type BorderValue = {
  color: XlsxColor;
  position: string;
  style: string;
};

rgbHex 支持 6 位 RRGGBB 或 8 位 AARRGGBB。8 位形式可以携带 alpha;{ r, g, b } RGB 对象本身不支持透明度。

在单元格文本编辑态下,setBoldsetItalicsetUnderlinesetStrikeThrough 会切换当前状态,并忽略传入的布尔值;setHorizontalAlignmentsetVerticalAlignment 在该状态下当前不会生效。

常用枚举:

参数常用值
setUnderline(value)"single""none"
setHorizontalAlignment(value)"left""center""right""justify""distributed"
setVerticalAlignment(value)"top""center""bottom""justify""distributed";兼容运行时数字值
setAccountingFormat(value)"RMB""Dollar""EUR""GBP""JPY""none"
BorderValue.position"all""none""inner""outer""left""right""top""bottom""verticalInner""horizontalInner""diagonalUp""diagonalDown"
BorderValue.style"hair""dotted""dashed""thin""medium""thick""double""dashDot""dashDotDot""mediumDashed""mediumDashDot""mediumDashDotDot""slantDashDot";清除边框时使用 position: "none"

示例:

ts
app.Selection.clearContents();

app.Selection.setFontName("Arial");
app.Selection.setFontSize(12);
app.Selection.setBold(true);
await app.Selection.setAccountingFormat("RMB");
app.Selection.setFontColor({ r: 192, g: 0, b: 0 });
app.Selection.setFillColor({ r: 255, g: 242, b: 204 });

app.Selection.setBorder({
  color: { r: 0, g: 0, b: 0 },
  position: "all",
  style: "thin"
});

await app.Selection.setNumberFormat("0.00");
app.Selection.increaseDecimalPlaces();

Selection 支持的组件事件:

事件名payload
SELECTION_CHANGEXlsxSelectionChange 或事件原始对象
ts
type XlsxSelectionChange = {
  bold: boolean;
  italic: boolean;
  fontName: string;
  fontSize: number | string;
  fontColor: unknown;
  underline: string;
  strikeout: boolean;
  fillColor: unknown;
  alignHorizontal: string;
  alignVertical: string;
  numFormat: string;
  numFormatType: string;
  canCopy?: boolean;
  bSelectAll?: boolean;
  isText?: boolean;
};

Finder

方法签名返回说明
search(text: string, callback?: (...args: unknown[]) => void): voidvoid开始查找关键词,可传回调。
selectFirst(): voidvoid跳到第一个查找结果。
selectNext(): voidvoid跳到下一个查找结果。
selectPrevious(): voidvoid跳到上一个查找结果。
getSearchStatus(): unknownunknown获取查找状态。

Finder 支持的组件事件:

事件名payload说明
XLSX_OPEN_FIND_UI文档请求打开查找 UI。

示例:

ts
app.Finder.search("Q1");
app.Finder.selectFirst();
app.Finder.selectNext();

console.log(app.Finder.getSearchStatus());

Cursor

方法签名返回说明
getTargetType(): "" | "columnHeader" | "rowHeader" | "cells" | "navBar"string获取当前鼠标/光标所在区域。

返回值:

说明
""当前没有稳定目标。
"cells"单元格区域。
"rowHeader"行头。
"columnHeader"列头。
"navBar"底部工作表标签区域。

示例:

ts
const targetType = app.Cursor.getTargetType();
if (targetType === "cells") {
  app.Selection.setBold(true);
}

UndoRedo

方法签名返回说明
undo(callback?: (value: unknown) => void): voidvoid撤销,可传回调。
redo(callback?: (value: unknown) => void): voidvoid重做,可传回调。
canUndo(): booleanboolean是否可撤销。
canRedo(): booleanboolean是否可重做。

UndoRedo 支持的组件事件:

事件名payload
UNDO_REDO_STATE_CHANGE

示例:

ts
if (app.UndoRedo.canRedo()) {
  app.UndoRedo.redo();
}