合并和取消合并 Excel 单元格是一项非常有用的功能，可以增强工作表中数据的结构和呈现效果。通过将多个单元格合并为一个单元格，或将合并的单元格恢复为原始状态，你可以更好地格式化数据，使其更具可读性和美观性。本文将演示如何在 React 中使用 Spire.XLS for 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
合并 Excel 中的特定单元格
合并单元格允许用户创建一个跨越多列或多行的标题，使数据更具视觉结构且更易于阅读。使用 Spire.XLS for JavaScript，开发者可以通过 CellRange.Merge() 方法将特定的相邻单元格合并为一个单元格。详细步骤如下：
- 使用 new wasmModule.Workbook() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.Range.get() 方法获取需要合并的单元格范围。
- 使用 CellRange.Merge() 方法合并特定单元格。
- 使用 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 MergeCells = 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) let inputFileName = '合并单元格_input.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.get("A1:D1").Merge();// 定义输出文件名 const outputFileName = "合并单元格_output.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={MergeCells}disabled={!wasmModule}>合并 </button></div>);}export default App;React 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://localhost:3000。
点击“合并”就能下载合并单元格后的输出Excel文件：
取消合并 Excel 中的特定单元格
取消合并单元格允许用户将之前合并的单元格恢复为原始状态，从而更好地操作数据和设置格式。使用 Spire.XLS for JavaScript，开发者可以通过 CellRange.UnMerge()方法取消合并特定的合并单元格。详细步骤如下：
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.Range.get()方法获取需要取消合并的单元格。
- 使用 CellRange.UnMerge()方法取消合并单元格。
- 使用 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 UnmergeCells = 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) let 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.get("A1").UnMerge();// 定义输出文件名 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={UnmergeCells}disabled={!wasmModule}>取消合并 </button></div>);}export default App;
取消合并 Excel 中的所有合并单元格
当处理包含多个合并单元格的电子表格时，一次性取消合并所有单元格可以快速恢复原始单元格的结构。使用 Spire.XLS for JavaScript，开发者可以通过 Worksheet.MergedCells属性轻松获取工作表中的所有合并单元格，并使用 CellRange.UnMerge()方法取消合并它们。详细步骤如下：
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.MergedCells属性获取工作表中的所有合并单元格。
- 遍历合并单元格并使用 CellRange.UnMerge()方法取消合并它们。
- 使用 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 UnmergeCells = 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) let 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);// 获取工作表中的所有合并单元格并将其放入 CellRange 数组 let range = sheet.MergedCells;// 遍历数组并取消合并所有合并单元格 for (let cell of range){cell.UnMerge();}// 定义输出文件名 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={UnmergeCells}disabled={!wasmModule}>取消合并 </button></div>);}export default App;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
