React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Excel锁定保护

React结合JavaScript实现Excel单元格、行与列的锁定保护

作者：缺点内向

在 Web 应用开发中,处理 Excel 文件时常常需要对关键数据进行保护,本文将介绍如何在 React 框架中,利用 Spire.XLS for JavaScript 这一基于 WebAssembly 的前端库,实现 Excel 单元格、行和列的锁定功能,有需要的小伙伴可以了解下

在 Web 应用开发中，处理 Excel 文件时常常需要对关键数据进行保护。例如，当某些公式、表头或参照值必须保持不变以确保数据完整性时，通过锁定特定单元格、行或列，可以有效防止意外修改，控制用户对电子表格内容的编辑权限。本文将介绍如何在 React 框架中，利用 Spire.XLS for JavaScript 这一基于 WebAssembly 的前端库，实现 Excel 单元格、行和列的锁定功能。

该库的一个特点是独立于 Microsoft Office 环境运行，可以在浏览器或 Node.js 环境中处理 Excel 文档，所有操作在本地完成，不依赖云服务。

环境配置

在 React 项目中开始之前，需要通过 npm 安装该库：

npm i spire.office

安装完成后，需要将库相关的 JavaScript 文件（如 spire.xls.js）和 WebAssembly 文件（.wasm）放置在项目的 public 目录下，以便在浏览器中动态加载。

在 React 中加载 WASM 模块

由于该库基于 WebAssembly，需要在 React 组件挂载时异步加载模块。以下是一种常见的加载方式：

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  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);
      }
    })();
  }, []);

  // 后续操作...
}

该方式通过动态导入加载库文件，并在 WebAssembly 运行时初始化完成后，将模块实例保存到组件状态中，供后续操作使用。

锁定特定单元格

Excel 默认情况下，工作表中所有单元格的锁定属性为 true，但只有在工作表被保护（Protect）后，锁定才会生效。因此，锁定特定单元格的核心步骤是：

  1. 先将工作表中所有单元格的锁定属性设为 false（解锁）。
  2. 再将需要保护的特定单元格或区域的锁定属性设为 true。
  3. 调用 Worksheet.Protect() 方法启用工作表保护，并设置密码（可选）。

以下是一个完整的示例代码，演示如何锁定 A1 单元格以及 C1:E3 区域：

const LockExcelCells = async () => {
  const wasmModule = window.wasmModule.spirexls;

  if (wasmModule) {
    // 1. 加载字体文件到虚拟文件系统（VFS），确保文本正常渲染
    await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

    // 2. 加载待处理的 Excel 文件到 VFS
    const inputFileName = '示例.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 3. 创建工作簿实例并加载文件
    const workbook = new wasmModule.Workbook();
    workbook.LoadFromFile(inputFileName);

    // 4. 获取第一个工作表
    let sheet = workbook.Worksheets.get(0);

    // 5. 解锁工作表中已使用范围内的所有单元格
    sheet.Range.Style.Locked = false;

    // 6. 锁定特定单元格 A1
    sheet.Range.get("A1").Style.Locked = true;

    // 7. 锁定特定区域 C1:E3
    sheet.Range.get("C1:E3").Style.Locked = true;

    // 8. 使用密码保护工作表
    sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

    // 9. 保存结果文件
    const outputFileName = "锁定单元格.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

    // 10. 从 VFS 读取文件并触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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);

    // 11. 释放资源
    workbook.Dispose();
  }
};

该方法通过先全部解锁、再单独锁定的方式，实现了对特定单元格的保护。SheetProtectionType.All 选项表示限制用户对工作表的所有编辑操作，包括插入、删除、格式调整等。

锁定整行

如果需要锁定整行，可以通过 Rows.get() 方法按索引来指定行。索引从 0 开始，例如 Rows.get(2) 表示第三行：

const LockExcelRows = async () => {
  const wasmModule = window.wasmModule.spirexls;

  if (wasmModule) {
    await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
    
    const inputFileName = '示例.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    const workbook = new wasmModule.Workbook();
    workbook.LoadFromFile(inputFileName);

    let sheet = workbook.Worksheets.get(0);

    // 解锁所有单元格
    sheet.Range.Style.Locked = false;

    // 锁定第三行（索引从0开始）
    sheet.Rows.get(2).Style.Locked = true;

    sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

    const outputFileName = "锁定行.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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();
  }
};

锁定整列

如果需要锁定整列，可以通过 Columns.get() 方法按索引来指定列。索引同样从 0 开始，例如 Columns.get(1) 表示第二列（B列）：

const LockExcelColumns = async () => {
  const wasmModule = window.wasmModule.spirexls;

  if (wasmModule) {
    await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
    
    const inputFileName = '示例.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    const workbook = new wasmModule.Workbook();
    workbook.LoadFromFile(inputFileName);

    let sheet = workbook.Worksheets.get(0);

    // 解锁所有单元格
    sheet.Range.Style.Locked = false;

    // 锁定第四列（索引从0开始）
    sheet.Columns.get(1).Style.Locked = true;

    sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

    const outputFileName = "锁定列.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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();
  }
};

注意事项

总结

通过 Spire.XLS for JavaScript 提供的 Style.Locked 属性和 Worksheet.Protect() 方法，可以在 React 应用中较为简洁地实现 Excel 单元格、行和列的锁定保护。这种方法依托 WebAssembly 技术，在浏览器端直接完成操作，无需后端服务支持，适合对数据隐私和响应速度有一定要求的场景。实际使用时，需要留意字体加载、虚拟文件系统操作以及资源释放等细节。

到此这篇关于React结合JavaScript实现Excel单元格、行与列的锁定保护的文章就介绍到这了,更多相关React Excel锁定保护内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文