随着企业越来越依赖基于 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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = `${outputfilename}`;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
}
};
return (
使用 javascript 在 react 中保护与取消保护 excel 工作簿-ag凯发旗舰厅
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = `${outputfilename}`;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = `${outputfilename}`;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = `${outputfilename}`;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = `${outputfilename}`;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
}
};
return (
);
}
export default app;申请临时 license
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。
