首页 > 网络编程 > JavaScript > javascript类库 > React > React保护与取消保护Excel工作簿

React中使用JavaScript保护与取消保护Excel工作簿

2026-07-11 08:47:02 作者：缺点内向

在日常的 Web 开发中,经常会遇到需要在前端生成或处理 Excel 文件的场景,本文以 React 项目为例,介绍如何借助前端电子表格库,直接在浏览器端实现 Excel 工作簿与工作表的保护与取消保护功能,有需要的小伙伴可以了解下

在日常的 Web 开发中，我们经常会遇到需要在前端生成或处理 Excel 文件的场景。除了基本的数据导出，很多时候我们还希望对工作簿的结构或内容加以限制，例如禁止用户修改工作表结构、限制编辑区域，或者对整个工作簿进行加密保护。本文将以 React 项目为例，介绍如何借助一款前端电子表格库，直接在浏览器端实现 Excel 工作簿与工作表的保护及取消保护操作。

环境准备：安装与初始化

本次使用的库需通过 npm 安装：

npm i spire.office

该库基于 WebAssembly 运行，因此在使用前需要加载 WASM 模块并将其挂载到全局作用域。可以在 React 组件的 useEffect 中完成这项初始化工作：

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('WASM 模块加载失败：', error);
      }
    })();
  }, []);

  // ...
}

这段代码会在组件挂载后异步加载 spire.xls.js，并完成 WASM 实例化。加载成功后，全局的 window.wasmModule 便可用于后续的所有文件操作。

使用密码保护整个工作簿

保护整个工作簿意味着用户必须输入密码才能打开或修改文件。这种方式适用于需要控制文件访问权限的场景，比如向外部人员分发的敏感数据报表。

以下是一个完整的 React 组件示例，实现了读取本地 Excel 文件、加密工作簿并触发下载的功能：

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

  if (wasmModule) {
    // 将字体文件加载到虚拟文件系统中
    await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

    // 将待处理的 Excel 文件加载到虚拟文件系统
    const inputFileName = 'sample.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

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

    // 使用密码加密工作簿
    workbook.Protect('password');

    // 定义输出文件名并保存
    const outputFileName = '加密Excel文件.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

    // 从 VFS 读取生成的文件并转换为 Blob 下载
    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();
  }
};

整个流程的步骤比较清晰：先将字体和 Excel 文件加载到虚拟文件系统（VFS），然后通过 LoadFromFile 读取文件，调用 Protect 方法设置密码，最后保存并通过 Blob 触发浏览器下载。需要注意的是，操作完成后应调用 Dispose 释放 WASM 占用的内存资源。

用 JavaScript 设置特定权限保护工作表

除了对整个工作簿加密，有时我们还需要对工作表施加更细粒度的控制。例如，只允许用户查看数据，但不允许修改内容、调整格式或增减行列。

下面的示例展示了如何获取第一个工作表，并为其设置仅允许“无任何操作”的保护策略：

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

  if (wasmModule) {
    // 加载字体和 Excel 文件到 VFS（与上文相同，此处省略重复代码）
    // ...

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

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

    // 使用特定权限保护工作表
    sheet.Protect({ password: '123456', options: wasmModule.SheetProtectionType.None });

    // 保存并下载（与上文相同，此处省略）
    // ...

    workbook.Dispose();
  }
};

这里的 SheetProtectionType.None 表示禁止所有操作。库还提供了其他保护类型可供组合，开发者可以根据实际需求选择合适的权限级别。这种细粒度的设置功能在制作只读数据报表或规范化模板时非常实用。

取消工作表的保护

对于已经施加保护的工作表，在拥有正确密码的前提下，可以通过 Unprotect 方法解除限制：

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

  if (wasmModule) {
    // 加载受保护的 Excel 文件到 VFS
    const inputFileName = '加密Excel工作表.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

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

    // 获取要解除保护的工作表
    const sheet = workbook.Worksheets.get(0);

    // 使用正确密码移除保护
    sheet.Unprotect('password');

    // 保存并下载解除保护后的文件
    const outputFileName = '取消保护Excel工作表.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

    // 读取文件并触发下载（与上文相同，此处省略）
    // ...

    workbook.Dispose();
  }
};

解除保护后重新保存的文件，用户即可自由编辑该工作表。如果密码不正确，方法调用会抛出异常，因此在实际项目中建议使用 try-catch 包裹，并对错误情况给出用户友好的提示。

注意事项

密码安全：上述示例中，密码以明文形式直接出现在前端代码里。对于有安全要求的场景，应避免将敏感密码硬编码，可以改为由用户在界面上输入，或通过后端接口动态获取。

WASM 加载时机：WASM 模块的下载和编译需要一定时间，建议在应用启动阶段或组件挂载早期完成初始化，并利用加载状态控制按钮的可操作性，如示例中通过 disabled={!wasmModule} 避免用户在引擎就绪前点击。

文件资源管理：库使用虚拟文件系统（VFS）管理文件，处理完成后应及时调用 Dispose 释放内存。同时，通过 URL.createObjectURL 生成的临时 URL 也应适时调用 revokeObjectURL 回收。

结语

前端处理 Excel 文件的能力正在逐步增强，以往需要服务端配合才能完成的文档保护操作，如今在浏览器中也可以独立实现。本文介绍了在 React 项目中对 Excel 工作簿进行整体加密、对工作表施加细粒度权限保护以及取消保护的完整流程。对于需要在前端生成受控文档、制作数据模板或保护用户数据安全的场景，这些方法提供了直接可行的技术方案。希望文中的示例能为有类似需求的开发者带来一些启发。

到此这篇关于React中使用JavaScript保护与取消保护Excel工作簿的文章就介绍到这了,更多相关React保护与取消保护Excel工作簿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！