随着企业越来越依赖基于 Web 的平台来处理和共享 Excel 表格数据，程序化地保护或取消保护 Exce 文件变得至关重要。这些安全措施不仅能防止敏感信息被未授权访问，还能通过对特定数据集设置访问权限，实现团队成员之间的高效协作。利用 JavaScript 和 React 框架，开发者可以直接在网页应用内实现这些功能，从而为数据机密性和完整性管理提供强有力的保障。本文将介绍如何使用 Spire.XLS for JavaScript 在 React 应用中保护和取消保护 Excel 工作簿。
安装 Spire.XLS for JavaScript
要在 React 应用中实现 Excel 文件的保护与取消保护，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：
npm i spire.office
下载的产品包整合了Spire.Doc for JavaScript，Spire.XLS for JavaScript，Spire.PDF for JavaScript，Spire.Presentation for JavaScript，使用Spire.XLS for JavaScript的功能需将相应（ spire.xls.js，Spire.Xls.Wasm.zip，spire.common.js，Spire.Common.Wasm.zip，_framework 文件复制到项目的 public 文件夹中。同时为了确保文本渲染，相关使用字体文件可自定义路径添加。以下示例中，字体添加路径为：public\static\font。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
用 JavaScript 设置密码保护整个 Excel 工作簿
Spire.XLS for JavaScript 提供了 Workbook.Protect(filename: string) 方法，可为 Excel 文件设置密码加密，从而保护整个工作簿。实现步骤如下：
- 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
- 通过 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 使用 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Protect() 方法为工作簿设置密码保护。
- 通过 Workbook.SaveToFile() 方法将工作簿保存为文件。
- 为生成的文件创建下载链接。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.XLS
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 使用密码保护 Excel 工作簿的函数
const EncryptExcel = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将 Excel 文件加载到虚拟文件系统 (VFS)
const inputFileName = 'sample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(inputFileName);
// 使用密码加密工作簿
workbook.Protect('password');
// 定义输出文件名
const outputFileName = "加密Excel文件.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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={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.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get(index) 方法获取目标工作表。
- 通过 Worksheet.Protect(password, SheetProtectionType.None) 方法对工作表进行保护（此处示例仅允许筛选）。
- 使用 Workbook.SaveToFile() 方法保存工作簿。
- 为文件创建下载链接。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.XLS
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 使用密码保护 Excel 工作表的函数
const EncryptExcelWorksheet = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将 Excel 文件加载到虚拟文件系统 (VFS)
const inputFileName = 'sample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(inputFileName);
// 获取工作表
const sheet = workbook.Worksheets.get(0);
// 使用特定权限保护工作表
sheet.Protect({ password: '123456', options: wasmModule.SheetProtectionType.None });
// 定义输出文件名
const outputFileName = "加密Excel文件.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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={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.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get(index) 方法获取目标工作表。
- 利用 Worksheet.Range.get() 方法获取需要设为可编辑的单元格区域。
- 通过 Worksheet.AddAllowEditRange() 方法将这些区域添加为可编辑区域。
- 使用 Worksheet.Protect({password: string, options: wasmModule.SheetProtectionType.All}) 方法对工作表进行保护。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为文件创建下载链接。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.XLS
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 保护 Excel 工作表并添加可编辑区域的函数
const EncryptExcelWorksheetWithEditableRange = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将 Excel 文件加载到虚拟文件系统 (VFS)
const inputFileName = 'sample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(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 });
// 定义输出文件名
const outputFileName = "设置可编辑区域.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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={EncryptExcelWorksheetWithEditableRange} disabled={!wasmModule}>
加密并下载
</button>
</div>
);
}
export default App;
使用 JavaScript 取消 Excel 工作表的保护
开发者可以通过调用 Worksheet.Unprotect(password: string) 方法，轻松移除工作表的密码保护，从而允许所有用户访问和编辑。具体步骤如下
- 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
- 使用 Workbook.Worksheets.get() 方法获取目标工作表。
- 通过 Worksheet.Unprotect() 方法移除密码保护。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为处理后的文件创建下载链接。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.XLS
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 解除 Excel 工作表保护的函数
const UnprotectExcelWorksheet = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将 Excel 文件加载到虚拟文件系统 (VFS)
const inputFileName = '加密Excel工作表.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(inputFileName);
// 获取要解除保护的工作表
const sheet = workbook.Worksheets.get(0);
// 移除密码保护
sheet.Unprotect('password');
// 定义输出文件名
const outputFileName = "取消保护Excel工作表.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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={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.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
- 通过 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 利用 Workbook.OpenPassword 属性指定原密码。
- 调用 Workbook.LoadFromFile() 方法加载加密的 Excel 文件。
- 使用 Workbook.Unprotect(password: string) 方法取消密码保护，或通过 Workbook.Protect(newPassword: string) 方法设置新密码。
- 调用 Workbook.SaveToFile() 方法保存工作簿。
- 为处理后的文件创建下载链接。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.XLS
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 解除 Excel 工作簿密码的函数
const RemoveResetExcelPassword = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将 Excel 文件加载到虚拟文件系统 (VFS)
const inputFileName = '加密Excel工作表.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 指定工作簿密码
workbook.OpenPassword = 'password';
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(inputFileName);
// 解除工作簿的保护
workbook.UnProtect('password');
// 重置密码（如有需要）
// workbook.Protect("NewPassword");
// 定义输出文件名
const outputFileName = "取消保护Excel工作表.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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={RemoveResetExcelPassword} disabled={!wasmModule}>
解除密码并下载
</button>
</div>
);
}
export default App;
申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
