React TS中隐藏excel-viewer工具栏并设置只读的实现方案

1. 优先使用官方配置项 #

直接在ExcelViewer初始化时添加对应配置参数，这是最推荐的方式：

• toolbar: false：隐藏工具栏组件
• readOnly: true：将电子表格设置为只读状态，禁止所有编辑操作

修改后的React TS代码如下：

new ExcelViewer(ref.current, "Book1.xlsx", {
  theme: "light",
  themeBtn: false,
  toolbar: false,
  readOnly: true
});

对应的容器元素保持不变：

<div className="excel-viewer" ref={ref} />

2. CSS兜底方案（若配置项不生效） #

如果官方配置无法达到预期效果，可通过CSS强制隐藏工具栏：

.excel-viewer .toolbar {
  display: none !important;
}

若要进一步强化只读限制，可禁用容器的编辑类交互（注意：会同时禁用滚动等操作，需按需使用）：

.excel-viewer {
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者user21250568