在使用 excel 时，有时需要保护关键数据，同时允许用户对其他部分进行编辑。尤其当某些公式、标题或参考值必须保持不变以确保数据完整性时，保护数据变得尤为重要。通过锁定特定区域，可以有效防止意外修改，确保数据一致性，并控制对电子表格中关键内容的编辑权限。本文将介绍如何在 react 中使用 javascript 和 spire.xls for javascript 库锁定 excel 中的单元格、行和列。
安装 spire.xls for javascript
要在 react 应用程序中实现锁定excel单元格、行和列，首先需要下载 spire.xls for javascript，或者通过 进行安装：
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
在 react 中使用 javascript 锁定 excel 单元格、行和列-ag凯发旗舰厅
);
}
export default app;react 应用程序编译成功后，将在默认网页浏览器中打开，通常是 。
点击“锁定”就能下载锁定单元格后的结果文件。打开文件并尝试编辑受保护的单元格时，将出现一个对话框，通知你正在修改的单元格位于受保护的工作表上：
锁定 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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
export default app;
申请临时 license
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。
