在使用 Excel 时，有时需要保护关键数据，同时允许用户对其他部分进行编辑。尤其当某些公式、标题或参考值必须保持不变以确保数据完整性时，保护数据变得尤为重要。通过锁定特定区域，可以有效防止意外修改，确保数据一致性，并控制对电子表格中关键内容的编辑权限。本文将介绍如何在 React 中使用 JavaScript 和 Spire.XLS for JavaScript 库锁定 Excel 中的单元格、行和列。

• 锁定 Excel 单元格
• 锁定 Excel 行
• 锁定 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

锁定 Excel 单元格

Spire.XLS for JavaScript 提供了 Worksheet.Range.get().Style.Locked 属性，允许你保护关键数据单元格，同时使工作表的其他部分可以进行编辑。详细步骤如下：

• 使用 new wasmModule.Workbook() 方法创建一个 Workbook 对象。
• 使用 Workbook.LoadFromFile() 方法加载示例 Excel 文件。
• 使用 Workbook.Worksheets.get() 方法获取第一个工作表。
• 将 Worksheet.Range.Style.Locked 属性设置为 false 来解锁工作表中的所有单元格。
• 将 Worksheet.Range.get().Style.Locked 属性设置为 true 来锁定特定单元格或单元格区域。
• 使用 Worksheet.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 LockExcelCells = 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 = '示例.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(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.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={LockExcelCells}disabled={!wasmModule}>锁定 </button></div>);}export default App;

React 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://localhost:3000。

点击“锁定”就能下载锁定单元格后的结果文件。打开文件并尝试编辑受保护的单元格时，将出现一个对话框，通知你正在修改的单元格位于受保护的工作表上：

锁定 Excel 行

如果你需要保护基于行的数据，如标题或汇总，可以使用 Spire.XLS for JavaScript 的 Worksheet.Rows.get().Style.Locked属性锁定整个行。详细步骤如下：

• 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
• 使用 Workbook.LoadFromFile()方法加载一个示例 Excel 文件。
• 使用 Workbook.Worksheets.get()方法获取第一个工作表。
• 将 Worksheet.Range.Style.Locked属性设置为 false 来解锁工作表中的所有单元格。
• 将 Worksheet.Rows.get().Style.Locked属性设置为 true 来锁定特定行。
• 使用 Worksheet.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( `${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 LockExcelRows = 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 = '示例.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(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: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={LockExcelRows}disabled={!wasmModule}>锁定 </button></div>);}export default App;

锁定 Excel 列

要维护关键纵向数据的完整性，如固定的标识符或类别标签，可以使用 Spire.XLS for JavaScript 的 Worksheet.Columns.get().Style.Locked属性锁定整个列。详细步骤如下：

• 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
• 使用 Workbook.LoadFromFile()方法加载一个示例 Excel 文件。
• 使用 Workbook.Worksheets.get()方法获取第一个工作表。
• 将 Worksheet.Range.Style.Locked属性设置为 false 来解锁工作表中的所有单元格。
• 将 Worksheet.Columns.get().Style.Locked属性设置为 true 来锁定特定列。
• 使用 Worksheet.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( `${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 LockExcelColumns = 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 = '示例.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName);// 获取第一个工作表 let sheet = workbook.Worksheets.get(0);// 解锁工作表中已使用范围内的所有单元格 sheet.Range.Style.Locked = false;// 锁定工作表中的第四列 sheet.Columns.get(1).Style.Locked = true;// 使用密码保护工作表 sheet.Protect({password:"123",options:wasmModule.SheetProtectionType.All});let 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={LockExcelColumns}disabled={!wasmModule}>锁定 </button></div>);}export default App;

申请临时 License

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。