合并和取消合并 excel 单元格是一项非常有用的功能，可以增强工作表中数据的结构和呈现效果。通过将多个单元格合并为一个单元格，或将合并的单元格恢复为原始状态，你可以更好地格式化数据，使其更具可读性和美观性。本文将演示如何在 react 中使用 spire.xls for javascript 来合并和取消合并 excel 单元格。
安装 spire.xls for javascript
要在 react 应用中实现合并和取消合并excel单元格，首先需要下载 spire.xls for javascript，或者通过 进行安装：
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
在 react 中使用 javascript 合并或取消合并 excel 单元格-ag凯发旗舰厅
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
export default app;申请临时 license
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。
