在使用 Excel 时，有时需要保护关键数据，同时允许用户对其他部分进行编辑。尤其当某些公式、标题或参考值必须保持不变以确保数据完整性时，保护数据变得尤为重要。通过锁定特定区域，可以有效防止意外修改，确保数据一致性，并控制对电子表格中关键内容的编辑权限。本文将介绍如何在 React 中使用 JavaScript 和 Spire.XLS for JavaScript 库锁定 Excel 中的单元格、行和列。
安装 Spire.XLS for JavaScript
要在 React 应用程序中实现锁定Excel单元格、行和列，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：
npm i spire.xls安装完成后，将 Spire.Xls.Base.js 和 Spire.Xls.Base.wasm 文件复制到项目的 public 文件夹中。此外，为确保文本的正确呈现，还需要添加所需的字体文件。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
锁定 Excel 单元格
Spire.XLS for JavaScript 提供了 Worksheet.Range.get().Style.Locked 属性，允许你保护关键数据单元格，同时使工作表的其他部分可以进行编辑。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载示例 Excel 文件。
- 使用 Workbook.Worksheets.get() 方法获取第一个工作表。
- 将 Worksheet.Range.Style.Locked 属性设置为 false 来解锁工作表中的所有单元格。
- 将 Worksheet.Range.get().Style.Locked 属性设置为 true 来锁定特定单元格或单元格区域。
- 使用 Worksheet.Protect() 方法加密工作表。
- 使用 Workbook.SaveToFile() 方法保存结果文件。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块的状态
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在运行时初始化时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中发生的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script元素添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 锁定Excel中特定单元格的函数
const LockExcelCells = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入的Excel文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载Excel文件
workbook.LoadFromFile({fileName: inputFileName});
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 解锁工作表中已使用范围内的所有单元格
sheet.Range.Style.Locked = false;
// 锁定工作表中的特定单元格
sheet.Range.get("A1").Style.Locked = true;
// 锁定工作表中的特定单元格范围
sheet.Range.get("C1:E3").Style.Locked = true;
// 使用密码保护工作表
sheet.Protect({password: "123", options: wasmModule.SheetProtectionType.All});
let outputFileName = "锁定单元格.xlsx";
// 保存结果文件
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });
// 读取保存的文件并将其转换为Blob对象
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 创建Blob的URL并启动下载
const url = URL.createObjectURL(modifiedFile);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 清理工作簿使用的资源
workbook.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在React中使用JavaScript锁定Excel中的特定单元格</h1>
<button onClick={LockExcelCells} disabled={!wasmModule}>
锁定
</button>
</div>
);
}
export default App;React 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://localhost:3000。
点击“锁定”就能下载锁定单元格后的结果文件。打开文件并尝试编辑受保护的单元格时，将出现一个对话框，通知你正在修改的单元格位于受保护的工作表上：
锁定 Excel 行
如果你需要保护基于行的数据，如标题或汇总，可以使用 Spire.XLS for JavaScript 的 Worksheet.Rows.get().Style.Locked 属性锁定整个行。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载一个示例 Excel 文件。
- 使用 Workbook.Worksheets.get() 方法获取第一个工作表。
- 将 Worksheet.Range.Style.Locked 属性设置为 false 来解锁工作表中的所有单元格。
- 将 Worksheet.Rows.get().Style.Locked 属性设置为 true 来锁定特定行。
- 使用 Worksheet.Protect() 方法加密工作表。
- 使用 Workbook.SaveToFile() 方法保存结果文件。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存加载的WASM模块的状态
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在运行时初始化时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中发生的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script元素添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 锁定Excel中特定行的函数
const LockExcelRows = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入的Excel文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载Excel文件
workbook.LoadFromFile({fileName: inputFileName});
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 解锁工作表中已使用范围内的所有单元格
sheet.Range.Style.Locked = false;
// 锁定工作表中的第三行
sheet.Rows.get(2).Style.Locked = true;
// 使用密码保护工作表
sheet.Protect({password: "123", options: wasmModule.SheetProtectionType.All});
let outputFileName = "锁定行.xlsx";
// 保存结果文件
workbook.SaveToFile({ fileName: outputFileName, version: waasmModule.ExcelVersion.Version2013 });
// 读取保存的文件并将其转换为Blob对象
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 创建Blob的URL并启动下载
const url = URL.createObjectURL(modifiedFile);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 清理工作簿使用的资源
workbook.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在React中使用JavaScript锁定Excel中的特定行</h1>
<button onClick={LockExcelRows} disabled={!wasmModule}>
锁定
</button>
</div>
);
}
export default App;
锁定 Excel 列
要维护关键纵向数据的完整性，如固定的标识符或类别标签，可以使用 Spire.XLS for JavaScript 的 Worksheet.Columns.get().Style.Locked 属性锁定整个列。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载一个示例 Excel 文件。
- 使用 Workbook.Worksheets.get() 方法获取第一个工作表。
- 将 Worksheet.Range.Style.Locked 属性设置为 false 来解锁工作表中的所有单元格。
- 将 Worksheet.Columns.get().Style.Locked 属性设置为 true 来锁定特定列。
- 使用 Worksheet.Protect() 方法加密工作表。
- 使用 Workbook.SaveToFile() 方法保存结果文件。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存加载的WASM模块的状态
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在运行时初始化时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中发生的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script元素添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 锁定Excel中特定列的函数
const LockExcelColumns = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入的Excel文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载Excel文件
workbook.LoadFromFile({fileName: inputFileName});
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 解锁工作表中已使用范围内的所有单元格
sheet.Range.Style.Locked = false;
// 锁定工作表中的第四列
sheet.Columns.get(3).Style.Locked = true;
// 使用密码保护工作表
sheet.Protect({password: "123", options: wasmModule.SheetProtectionType.All});
let outputFileName = "锁定列.xlsx";
// 保存结果文件
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });
// 读取保存的文件并将其转换为Blob对象
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 创建Blob的URL并启动下载
const url = URL.createObjectURL(modifiedFile);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 清理工作簿使用的资源
workbook.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在React中使用JavaScript锁定Excel中的特定列</h1>
<button onClick={LockExcelColumns} disabled={!wasmModule}>
锁定
</button>
</div>
);
}
export default App;
申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
