合并和取消合并 Excel 单元格是一项非常有用的功能，可以增强工作表中数据的结构和呈现效果。通过将多个单元格合并为一个单元格，或将合并的单元格恢复为原始状态，你可以更好地格式化数据，使其更具可读性和美观性。本文将演示如何在 React 中使用 Spire.XLS for JavaScript 来合并和取消合并 Excel 单元格。
安装 Spire.XLS for JavaScript
要在 React 应用中实现合并和取消合并Excel单元格，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：
npm i spire.xls安装完成后，将 Spire.Xls.Base.js 和 Spire.Xls.Base.wasm 文件复制到项目的 public 文件夹中。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
合并 Excel 中的特定单元格
合并单元格允许用户创建一个跨越多列或多行的标题，使数据更具视觉结构且更易于阅读。使用 Spire.XLS for JavaScript，开发者可以通过 CellRange.Merge() 方法将特定的相邻单元格合并为一个单元格。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.Range.get() 方法获取需要合并的单元格范围。
- 使用 CellRange.Merge() 方法合并特定单元格。
- 使用 Workbook.SaveToFile() 方法保存结果工作簿。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载 WASM 模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行合并Excel工作表中指定单元格的函数
const MergeCells = async () => {
if (wasmModule) {
// 将示例 Excel 文件加载到虚拟文件系统 (VFS)
let excelFileName = '合并单元格_input.xlsx';
await wasmModule.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(excelFileName);
// 获取第一个工作表
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 = wasmModule.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() 方法取消合并特定的合并单元格。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.Range.get() 方法获取需要取消合并的单元格。
- 使用 CellRange.UnMerge() 方法取消合并单元格。
- 使用 Workbook.SaveToFile() 方法保存结果工作簿。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载 WASM 模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行取消合并Excel工作表中特定单元格的函数
const UnmergeCells = async () => {
if (wasmModule) {
// 将示例 Excel 文件加载到虚拟文件系统 (VFS)
let excelFileName = '合并单元格_output.xlsx';
await wasmModule.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(excelFileName);
// 获取第一个工作表
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 = wasmModule.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() 方法取消合并它们。详细步骤如下：
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.MergedCells 属性获取工作表中的所有合并单元格。
- 遍历合并单元格并使用 CellRange.UnMerge() 方法取消合并它们。
- 使用 Workbook.SaveToFile() 方法保存结果工作簿。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载 WASM 模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行取消合并Excel工作表中所有合并单元格的函数
const UnmergeCells = async () => {
if (wasmModule) {
// 将示例 Excel 文件加载到虚拟文件系统 (VFS)
let excelFileName = '合并单元格_output.xlsx';
await wasmModule.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 从虚拟文件系统加载 Excel 文件
workbook.LoadFromFile(excelFileName);
// 获取第一个工作表
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 = wasmModule.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 天的临时许可证。
