随着企业越来越依赖基于 Web 的平台来处理和共享 Excel 表格数据，程序化地保护或取消保护 Exce 文件变得至关重要。这些安全措施不仅能防止敏感信息被未授权访问，还能通过对特定数据集设置访问权限，实现团队成员之间的高效协作。利用 JavaScript 和 React 框架，开发者可以直接在网页应用内实现这些功能，从而为数据机密性和完整性管理提供强有力的保障。本文将介绍如何使用 Spire.XLS for JavaScript 在 React 应用中保护和取消保护 Excel 工作簿。
- 用 JavaScript 设置密码保护整个 Excel 工作簿
- 用 JavaScript 设置特定权限保护 Excel 工作表
- 在保护 Excel 工作表时设置可编辑区域
- 使用 JavaScript 取消 Excel 工作表的保护
- 用 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
用 JavaScript 设置密码保护整个 Excel 工作簿
Spire.XLS for JavaScript 提供了 Workbook.Protect(filename: string) 方法，可为 Excel 文件设置密码加密，从而保护整个工作簿。实现步骤如下：
- 加载 Spire.Xls.Base.js 文件以初始化 WebAssembly 模块。
- 通过 wasmModule.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 使用 wasmModule.Workbook.Create() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Protect() 方法为工作簿设置密码保护。
- 通过 Workbook.SaveToFile() 方法将工作簿保存为文件。
- 为生成的文件创建下载链接。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 存储加载的 WASM 模块的状态
const [wasmModule, setWasmModule] = useState(null);
// useEffect 钩子，在组件挂载时加载 WASM 模块
useEffect(() => {
const loadWasm = async () => {
try {
// 访问全局 window 对象中的 Module 和 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 EncryptExcel = async () => {
if (wasmModule) {
// 指定输入和输出文件名
const inputFileName = 'Sample.xlsx';
const outputFileName = '加密Excel文件.xlsx';
// 获取输入文件并添加到 VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建 Workbook 类的实例
const workbook = wasmModule.Workbook.Create();
// 从输入文件加载 Excel 工作簿
workbook.LoadFromFile({ fileName: inputFileName });
// 使用密码加密工作簿
workbook.Protect('password');
// 保存工作簿
workbook.SaveToFile({ fileName: outputFileName });
// 从 VFS 读取工作簿
const excelArray = await wasmModule.FS.readFile(outputFileName);
// 生成 Blob 对象，并触发下载 Excel 文件
const blob = new Blob([excelArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${outputFileName}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 保护 Excel 工作簿</h1>
<button onClick={EncryptExcel} disabled={!wasmModule}>
加密并下载
</button>
</div>
);
}
export default App;
用 JavaScript 设置特定权限保护 Excel 工作表
开发者使用 Worksheet.Protect() 方法对工作表进行保护，并设置具体权限，比如限制编辑但允许格式化或筛选，或完全禁止所有更改。权限通过 SheetProtectionType 枚举类进行指定，具体权限类型如下：
| 保护类型 | 允许的操作 |
| Content | 修改或插入内容 |
| DeletingColumns | 删除列 |
| DeletingRows | 删除行 |
| Filtering | 设置筛选 |
| FormattingCells | 格式化单元格 |
| FormattingColumns | 格式化列 |
| FormattingRows | 格式化行 |
| InsertingColumns | 插入列 |
| InsertingRows | 插入行 |
| InsertingHyperlinks | 插入超链接 |
| LockedCells | 选择受保护的单元格 |
| UnlockedCells | 选择未受保护的单元格 |
| Objects | 修改图形对象 |
| Scenarios | 修改保存的方案 |
| Sorting | 对数据进行排序 |
| UsingPivotTables | 使用数据透视表和数据透视图 |
| All | 对受保护工作表执行所有上述操作 |
| None | 不允许在受保护工作表上进行任何操作 |
具体步骤如下：
- 加载 Spire.Xls.Base.js 文件以初始化 WebAssembly 模块。
- 使用 wasmModule.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 wasmModule.Workbook.Create() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get(index) 方法获取目标工作表。
- 通过 Worksheet.Protect(password, SheetProtectionType.None) 方法对工作表进行保护（此处示例仅允许筛选）。
- 使用 Workbook.SaveToFile() 方法保存工作簿。
- 为文件创建下载链接。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 存储加载的 WASM 模块的状态
const [wasmModule, setWasmModule] = useState(null);
// useEffect 钩子，在组件挂载时加载 WASM 模块
useEffect(() => {
const loadWasm = async () => {
try {
// 访问全局 window 对象中的 Module 和 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 EncryptExcelWorksheet = async () => {
if (wasmModule) {
// 指定输入和输出文件名
const inputFileName = 'Sample.xlsx';
const outputFileName = '加密Excel工作表.xlsx';
// 获取输入文件并添加到 VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建 Workbook 类的实例
const workbook = wasmModule.Workbook.Create();
// 从输入文件加载 Excel 工作簿
workbook.LoadFromFile({ fileName: inputFileName });
// 获取工作表
const sheet = workbook.Worksheets.get(0);
// 使用特定权限保护工作表
sheet.Protect({ password: '123456', options: wasmModule.SheetProtectionType.None });
// 保存工作簿
workbook.SaveToFile({ fileName: outputFileName });
// 从 VFS 读取工作簿
const excelArray = await wasmModule.FS.readFile(outputFileName);
// 生成 Blob 对象，并触发下载 Excel 文件
const blob = new Blob([excelArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${outputFileName}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 保护 Excel 工作表</h1>
<button onClick={EncryptExcelWorksheet} disabled={!wasmModule}>
加密并下载
</button>
</div>
);
}
export default App;
在保护 Excel 工作表时设置可编辑区域
如果需要在保护工作表的同时保留部分单元格区域的编辑权限，可使用 Worksheet.AddAllowEditRange(name: string, range: CellRange) 方法定义可编辑区域，然后通过 Worksheet.Protect({password: string, options: wasmModule.SheetProtectionType.All}) 方法进行保护。具体步骤如下：
- 加载 Spire.Xls.Base.js 文件以初始化 WebAssembly 模块。
- 使用 wasmModule.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 wasmModule.Workbook.Create() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get(index) 方法获取目标工作表。
- 利用 Worksheet.Range.get() 方法获取需要设为可编辑的单元格区域。
- 通过 Worksheet.AddAllowEditRange() 方法将这些区域添加为可编辑区域。
- 使用 Worksheet.Protect({password: string, options: wasmModule.SheetProtectionType.All}) 方法对工作表进行保护。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为文件创建下载链接。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 存储加载的 WASM 模块的状态
const [wasmModule, setWasmModule] = useState(null);
// useEffect 钩子，在组件挂载时加载 WASM 模块
useEffect(() => {
const loadWasm = async () => {
try {
// 访问全局 window 对象中的 Module 和 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 EncryptExcelWorksheetWithEditableRange = async () => {
if (wasmModule) {
// 指定输入和输出文件名
const inputFileName = 'Sample.xlsx';
const outputFileName = '设置可编辑区域.xlsx';
// 获取输入文件并添加到 VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建 Workbook 类的实例
const workbook = wasmModule.Workbook.Create();
// 从输入文件加载 Excel 工作簿
workbook.LoadFromFile({ fileName: inputFileName });
// 获取工作表
const sheet = workbook.Worksheets.get(0);
// 添加可编辑区域
const range1 = sheet.Range.get('C2:C9');
sheet.AddAllowEditRange({ title: "可编辑区域 1", range: range1 });
const range2 = sheet.Range.get('G2:G9');
sheet.AddAllowEditRange({ title: "可编辑区域 2", range: range2 });
// 保护工作表
sheet.Protect({ password: '123456', options: wasmModule.SheetProtectionType.All });
// 保存工作簿
workbook.SaveToFile({ fileName: outputFileName });
// 从 VFS 读取工作簿
const excelArray = await wasmModule.FS.readFile(outputFileName);
// 生成 Blob 对象，并触发下载 Excel 文件
const blob = new Blob([excelArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${outputFileName}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 保护 Excel 工作表并添加可编辑区域</h1>
<button onClick={EncryptExcelWorksheetWithEditableRange} disabled={!wasmModule}>
加密并下载
</button>
</div>
);
}
export default App;
使用 JavaScript 取消 Excel 工作表的保护
开发者可以通过调用 Worksheet.Unprotect(password: string) 方法，轻松移除工作表的密码保护，从而允许所有用户访问和编辑。具体步骤如下
- 加载 Spire.Xls.Base.js 文件以初始化 WebAssembly 模块。
- 使用 wasmModule.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 wasmModule.Workbook.Create() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get() 方法获取目标工作表。
- 通过 Worksheet.Unprotect() 方法移除密码保护。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为处理后的文件创建下载链接。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 存储加载的 WASM 模块的状态
const [wasmModule, setWasmModule] = useState(null);
// useEffect 钩子，在组件挂载时加载 WASM 模块
useEffect(() => {
const loadWasm = async () => {
try {
// 访问全局 window 对象中的 Module 和 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 UnprotectExcelWorksheet = async () => {
if (wasmModule) {
// 指定输入和输出文件名
const inputFileName = '加密Excel工作表.xlsx';
const outputFileName = '取消保护Excel工作表.xlsx';
// 获取输入文件并添加到 VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建 Workbook 类的实例
const workbook = wasmModule.Workbook.Create();
// 从输入文件加载 Excel 工作簿
workbook.LoadFromFile({ fileName: inputFileName });
// 获取要解除保护的工作表
const sheet = workbook.Worksheets.get(0);
// 移除密码保护
sheet.Unprotect('password');
// 保存工作簿
workbook.SaveToFile({ fileName: outputFileName });
// 从 VFS 读取工作簿
const excelArray = await wasmModule.FS.readFile(outputFileName);
// 生成 Blob 对象，并触发下载 Excel 文件
const blob = new Blob([excelArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${outputFileName}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 解除 Excel 工作表保护</h1>
<button onClick={UnprotectExcelWorksheet} disabled={!wasmModule}>
解除保护并下载
</button>
</div>
);
}
export default App;用 JavaScript 重置或移除 Excel 工作簿的密码
Spire.XLS for JavaScript 提供 Workbook.OpenPassword 属性，用于指定加密 Excel 工作簿的密码，从而让开发者能够加载和处理这些文件。加载加密工作簿后，开发者可以选择使用 Workbook.Unprotect(password: string) 方法移除原有密码，或通过 Workbook.Protect(newPassword: string) 方法设置新的密码。具体步骤如下：
- 加载 Spire.Xls.Base.js 文件以初始化 WebAssembly 模块。
- 使用 wasmModule.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 wasmModule.Workbook.Create() 方法创建 Workbook 实例。
- 利用 Workbook.OpenPassword 属性指定原密码。
- 调用 Workbook.LoadFromFile() 方法加载加密的 Excel 文件。
- 使用 Workbook.Unprotect(password: string) 方法取消密码保护，或通过 Workbook.Protect(newPassword: string) 方法设置新密码。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为处理后的文件创建下载链接。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 存储加载的 WASM 模块的状态
const [wasmModule, setWasmModule] = useState(null);
// useEffect 钩子，在组件挂载时加载 WASM 模块
useEffect(() => {
const loadWasm = async () => {
try {
// 访问全局 window 对象中的 Module 和 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 RemoveResetExcelPassword = async () => {
if (wasmModule) {
// 指定输入和输出文件名
const inputFileName = '加密Excel文件.xlsx';
const outputFileName = '取消保护Excel文件.xlsx';
// 获取输入文件并添加到 VFS
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建 Workbook 类的实例
const workbook = wasmModule.Workbook.Create();
// 指定工作簿密码
workbook.OpenPassword = 'password';
// 从输入文件加载 Excel 工作簿
workbook.LoadFromFile({ fileName: inputFileName });
// 解除工作簿的保护
workbook.UnProtect('password');
// 重置密码（如有需要）
// workbook.Protect("NewPassword");
// 保存工作簿
workbook.SaveToFile({ fileName: outputFileName });
// 从 VFS 读取工作簿
const excelArray = await wasmModule.FS.readFile(outputFileName);
// 生成 Blob 对象，并触发下载 Excel 文件
const blob = new Blob([excelArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${outputFileName}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 解除 Excel 工作簿密码</h1>
<button onClick={RemoveResetExcelPassword} disabled={!wasmModule}>
解除密码并下载
</button>
</div>
);
}
export default App;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
