随着企业越来越依赖基于 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.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

用 JavaScript 设置密码保护整个 Excel 工作簿

Spire.XLS for JavaScript 提供了 Workbook.Protect(filename: string) 方法，可为 Excel 文件设置密码加密，从而保护整个工作簿。实现步骤如下：

• 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
• 通过 window.spire.FetchFileToVFS() 方法将 Excel 文件加载到虚拟文件系统中。
• 使用 new wasmModule.Workbook() 方法创建 Workbook 实例。
• 调用 Workbook.LoadFromFile() 方法将 Excel 文件加载到实例中。
• 使用 Workbook.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 EncryptExcel = 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 = 'sample.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName);// 使用密码加密工作簿 workbook.Protect('password');// 定义输出文件名 const outputFileName = "加密Excel文件.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={EncryptExcel}disabled={!wasmModule}>加密并下载 </button></div>);}export default App;

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

开发者使用 Worksheet.Protect()方法对工作表进行保护，并设置具体权限，比如限制编辑但允许格式化或筛选，或完全禁止所有更改。权限通过 SheetProtectionType枚举类进行指定，具体权限类型如下：

具体步骤如下：

• 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
• 使用 window.spire.FetchFileToVFS()方法将 Excel 文件加载到虚拟文件系统中。
• 通过 new wasmModule.Workbook()方法创建 Workbook实例。
• 调用 Workbook.LoadFromFile()方法将 Excel 文件加载到实例中。
• 使用Workbook.Worksheets.get(index)方法获取目标工作表。
• 通过 Worksheet.Protect(password,SheetProtectionType.None)方法对工作表进行保护（此处示例仅允许筛选）。
• 使用 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 EncryptExcelWorksheet = 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 = 'sample.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName);// 获取工作表 const sheet = workbook.Worksheets.get(0);// 使用特定权限保护工作表 sheet.Protect({password:'123456',options:wasmModule.SheetProtectionType.None});// 定义输出文件名 const outputFileName = "加密Excel文件.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={EncryptExcelWorksheet}disabled={!wasmModule}>加密并下载 </button></div>);}export default App;

在保护 Excel 工作表时设置可编辑区域

如果需要在保护工作表的同时保留部分单元格区域的编辑权限，可使用 Worksheet.AddAllowEditRange(name:string,range:CellRange)方法定义可编辑区域，然后通过 Worksheet.Protect({password:string,options:wasmModule.SheetProtectionType.All})方法进行保护。具体步骤如下：

• 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
• 使用 window.spire.FetchFileToVFS()方法将 Excel 文件加载到虚拟文件系统中。
• 通过 new wasmModule.Workbook()方法创建 Workbook实例。
• 调用 Workbook.LoadFromFile()方法将 Excel 文件加载到实例中。
• 使用 Workbook.Worksheets.get(index)方法获取目标工作表。
• 利用 Worksheet.Range.get()方法获取需要设为可编辑的单元格区域。
• 通过 Worksheet.AddAllowEditRange()方法将这些区域添加为可编辑区域。
• 使用 Worksheet.Protect({password:string,options:wasmModule.SheetProtectionType.All})方法对工作表进行保护。
• 调用 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 EncryptExcelWorksheetWithEditableRange = 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 = 'sample.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(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});// 定义输出文件名 const 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={EncryptExcelWorksheetWithEditableRange}disabled={!wasmModule}>加密并下载 </button></div>);}export default App;

使用 JavaScript 取消 Excel 工作表的保护

开发者可以通过调用 Worksheet.Unprotect(password:string)方法，轻松移除工作表的密码保护，从而允许所有用户访问和编辑。具体步骤如下

• 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
• 使用 window.spire.FetchFileToVFS()方法将 Excel 文件加载到虚拟文件系统中。
• 通过 new wasmModule.Workbook()方法创建 Workbook实例。
• 调用 Workbook.LoadFromFile()方法将 Excel 文件加载到实例中。
• 使用 Workbook.Worksheets.get()方法获取目标工作表。
• 通过 Worksheet.Unprotect()方法移除密码保护。
• 调用 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 UnprotectExcelWorksheet = 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 = '加密Excel工作表.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName);// 获取要解除保护的工作表 const sheet = workbook.Worksheets.get(0);// 移除密码保护 sheet.Unprotect('password');// 定义输出文件名 const outputFileName = "取消保护Excel工作表.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={UnprotectExcelWorksheet}disabled={!wasmModule}>解除保护并下载 </button></div>);}export default App;

用 JavaScript 重置或移除 Excel 工作簿的密码

Spire.XLS for JavaScript 提供 Workbook.OpenPassword属性，用于指定加密 Excel 工作簿的密码，从而让开发者能够加载和处理这些文件。加载加密工作簿后，开发者可以选择使用 Workbook.Unprotect(password:string)方法移除原有密码，或通过 Workbook.Protect(newPassword:string)方法设置新的密码。具体步骤如下：

• 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
• 使用 window.spire.FetchFileToVFS()方法将 Excel 文件加载到虚拟文件系统中。
• 通过 new wasmModule.Workbook()方法创建 Workbook实例。
• 利用 Workbook.OpenPassword属性指定原密码。
• 调用 Workbook.LoadFromFile()方法加载加密的 Excel 文件。
• 使用 Workbook.Unprotect(password:string)方法取消密码保护，或通过 Workbook.Protect(newPassword:string)方法设置新密码。
• 调用 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 RemoveResetExcelPassword = 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 = '加密Excel工作表.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 指定工作簿密码 workbook.OpenPassword = 'password';// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName);// 解除工作簿的保护 workbook.UnProtect('password');// 重置密码（如有需要） // workbook.Protect("NewPassword");// 定义输出文件名 const outputFileName = "取消保护Excel工作表.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={RemoveResetExcelPassword}disabled={!wasmModule}>解除密码并下载 </button></div>);}export default App;

申请临时 License

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