在数据可视化应用中，将 excel 工作簿中的图表和形状导出为独立图像是提升跨平台兼容性的关键。通过将动态生成的图表、形状转换为 png/jpg 等通用图像格式，开发者可确保数据可视化内容在网页、移动端等非 office 环境中正确展示，同时简化报告生成和演示文稿更新的工作流程。借助 spire.xls for javascript 库，开发人员能够在 react 程序中轻松实现 excel 图表和形状的导出功能。
本文将介绍如何使用 spire.xls for javascript 在 react 中通过 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
使用 javascript 将 excel 图表保存为图像
借助 spire.xls for javascript 的 webassembly 模块，开发人员可以使用 workbook.savechartasimage() 方法将 excel 工作表中的特定图表保存为图像，并存储到虚拟文件系统（vfs）中。保存的图像可以下载或用于进一步处理。
具体步骤如下：
- 加载 spire.xls.base.js 文件以初始化 webassembly 模块。
- 使用 wasmmodule.fetchfiletovfs() 方法将 excel 文件和字体文件加载到 vfs。
- 使用 wasmmodule.workbook.create() 方法创建 workbook 实例。
- 使用 workbook.loadfromfile() 方法将 excel 文件加载到 workbook 实例中。
- 使用 workbook.worksheets.get() 方法获取特定工作表或遍历所有工作表。
- 遍历图表并使用 workbook.savechartasimage() 方法将其保存为图像，参数包括工作表和图表索引。
- 使用 image.save() 方法将图像保存到 vfs。
- 下载图像或按需使用。
- javascript
import react, { usestate, useeffect } from 'react';
import jszip from 'jszip';
function app() {
// 用于存储加载的wasm模块的状态
const [wasmmodule, setwasmmodule] = usestate(null);
// 组件挂载时使用useeffect钩子加载wasm模块
useeffect(() => {
const loadwasm = async () => {
try {
// 从全局window对象访问module和spirexls
const { module, spirexls } = window;
// 当运行时初始化时设置wasmmodule状态
module.onruntimeinitialized = () => {
setwasmmodule(spirexls);
};
} catch (err) {
// 记录模块加载期间发生的任何错误
console.error('加载wasm模块失败:', err);
}
};
// 创建一个脚本元素来加载wasm javascript文件
const script = document.createelement('script');
script.src = `${process.env.public_url}/spire.xls.base.js`;
script.onload = loadwasm;
// 将脚本添加到文档主体
document.body.appendchild(script);
// 清理函数，当组件卸载时移除脚本
return () => {
document.body.removechild(script);
};
}, []);
// 将图表转换为图片的函数
const saveexcelchartasimage = async () => {
if (wasmmodule) {
// 指定输入文件名
const inputfilename = 'sample.xlsx';
// 获取输入文件并将其添加到vfs（虚拟文件系统）
await wasmmodule.fetchfiletovfs(inputfilename, '', `${process.env.public_url}/`);
// 获取字体文件并将其添加到vfs
await wasmmodule.fetchfiletovfs('harmonyos_sans.ttf', '/library/fonts/', `${process.env.public_url}/`);
await wasmmodule.fetchfiletovfs('arial.ttf', '/library/fonts/', `${process.env.public_url}/`);
// 在vfs中创建图像文件夹
const imagefoldername = `images`;
wasmmodule.fs.mkdir(imagefoldername, 0x1ff);
// 创建workbook类的实例
const workbook = wasmmodule.workbook.create();
// 从输入文件加载excel工作簿
workbook.loadfromfile({ filename: inputfilename });
// 遍历工作簿中的每个工作表
for (let i = 0; i < workbook.worksheets.count; i ) {
// 获取当前工作表
const sheet = workbook.worksheets.get(i);
// 遍历工作表中的每个图表
for (let j = 0; j < sheet.charts.count; j ) {
// 将当前图表保存为图像
let image = workbook.savechartasimage({ worksheet: sheet, chartindex: j})
// 将图像保存到vfs
image.save(`${imagefoldername}/${sheet.name}_chart-${j}.png`, 0x1ff)
}
}
// 递归函数，将目录及其内容添加到zip中
const addfilestozip = (folderpath, zipfolder) => {
const items = wasmmodule.fs.readdir(folderpath);
items.filter(item => item !== "." && item !== "..").foreach((item) => {
const itempath = `${folderpath}/${item}`;
try {
// 尝试读取文件数据
const filedata = wasmmodule.fs.readfile(itempath);
zipfolder.file(item, filedata);
} catch (error) {
if (error.code === 'eisdir') {
// 如果是目录，则在zip中创建新文件夹，并递归进入它
const zipsubfolder = zipfolder.folder(item);
addfilestozip(itempath, zipsubfolder);
} else {
// 处理其他错误
console.error(`处理${itempath}时出错:`, error);
}
}
});
};
// 将图像文件夹打包成zip文件
const zip = new jszip();
addfilestozip(imagefoldername, zip);
// 从结果zip文件生成blob并触发下载
zip.generateasync({type:"blob"})
.then(function(content) {
const link = document.createelement('a');
link.href = url.createobject;
link.download = 'charts.zip';
document.body.appendchild(link);
link.click();
document.body.removechild(link);
url.revokeobject;
}).catch(function(err) {
console.error("生成zip文件时出错:", err);
});
}
};
return (
在 react 中使用 javascript 保存 excel 图表和形状为图片-ag凯发旗舰厅
);
}
export default app;
使用 javascript 将 excel 形状保存为图像
开发者可以使用 worksheet.prstgeomshapes.get() 方法从 excel 工作表中获取形状，并使用 shape.savetoimage() 方法将其保存为图像。保存的图像可存储在虚拟文件系统（vfs）中，并可下载或用于进一步处理。
具体步骤如下：
- 加载 spire.xls.base.js 文件以初始化 webassembly 模块。
- 使用 wasmmodule.fetchfiletovfs() 方法将 excel 文件和字体文件加载到 vfs。
- 使用 wasmmodule.workbook.create() 方法创建 workbook 实例。
- 使用 workbook.loadfromfile() 方法将 excel 文件加载到 workbook 实例中。
- 使用 workbook.worksheets.get() 方法获取特定工作表或遍历所有工作表。
- 使用 worksheet.prstgeomshapes.get() 方法获取单个形状或遍历所有形状。
- 使用 shape.savetoimage() 方法将形状保存为图像。
- 使用 image.save() 方法将图像保存到 vfs。
- 下载图像或按需使用。
- javascript
import react, { usestate, useeffect } from 'react';
import jszip from 'jszip';
function app() {
// 用于存储加载的wasm模块的状态
const [wasmmodule, setwasmmodule] = usestate(null);
// 组件挂载时使用useeffect钩子加载wasm模块
useeffect(() => {
const loadwasm = async () => {
try {
// 从全局window对象访问module和spirexls
const { module, spirexls } = window;
// 当运行时初始化时设置wasmmodule状态
module.onruntimeinitialized = () => {
setwasmmodule(spirexls);
};
} catch (err) {
// 记录模块加载期间发生的任何错误
console.error('加载wasm模块失败:', err);
}
};
// 创建一个脚本元素来加载wasm javascript文件
const script = document.createelement('script');
script.src = `${process.env.public_url}/spire.xls.base.js`;
script.onload = loadwasm;
// 将脚本添加到文档主体
document.body.appendchild(script);
// 清理函数，当组件卸载时移除脚本
return () => {
document.body.removechild(script);
};
}, []);
// 将形状转换为图像的函数
const saveexcelshapeasimage = async () => {
if (wasmmodule) {
// 指定输入文件名
const inputfilename = 'sample65.xlsx';
// 获取输入文件并添加到vfs（虚拟文件系统）
await wasmmodule.fetchfiletovfs(inputfilename, '', `${process.env.public_url}/`);
// 获取字体文件并添加到vfs
await wasmmodule.fetchfiletovfs('harmonyos_sans.ttf', '/library/fonts/', `${process.env.public_url}/`);
await wasmmodule.fetchfiletovfs('arial.ttf', '/library/fonts/', `${process.env.public_url}/`);
// 在vfs中创建图像文件夹
const imagefoldername = `images`;
wasmmodule.fs.mkdir(imagefoldername, 0x1ff);
// 创建workbook类的实例
const workbook = wasmmodule.workbook.create();
// 从输入文件加载excel工作簿
workbook.loadfromfile({ filename: inputfilename });
// 遍历工作簿中的每个工作表
for (let i = 0; i < workbook.worksheets.count; i ) {
// 获取当前工作表
const sheet = workbook.worksheets.get(i);
// 遍历工作表中的每个形状
for (let j = 0; j < sheet.prstgeomshapes.count; j ) {
// 获取当前形状
const shape = sheet.prstgeomshapes.get(j);
// 将形状保存为图像
const image = shape.savetoimage();
// 将图像保存到vfs
image.save(`${imagefoldername}/${sheet.name}_shape-${j}.png`, 0x1ff)
}
}
// 递归函数，用于将目录及其内容添加到zip中
const addfilestozip = (folderpath, zipfolder) => {
const items = wasmmodule.fs.readdir(folderpath);
items.filter(item => item !== "." && item !== "..").foreach((item) => {
const itempath = `${folderpath}/${item}`;
try {
// 尝试读取文件数据
const filedata = wasmmodule.fs.readfile(itempath);
zipfolder.file(item, filedata);
} catch (error) {
if (error.code === 'eisdir') {
// 如果是目录，则在zip中创建一个新文件夹，并递归进入它
const zipsubfolder = zipfolder.folder(item);
addfilestozip(itempath, zipsubfolder);
} else {
// 处理其他错误
console.error(`error processing ${itempath}:`, error);
}
}
});
};
// 将图像文件夹打包到zip文件中
const zip = new jszip();
addfilestozip(imagefoldername, zip);
// 从结果zip文件生成blob并触发下载
zip.generateasync({type:"blob"})
.then(function(content) {
const link = document.createelement('a');
link.href = url.createobject;
link.download = 'shapes.zip';
document.body.appendchild(link);
link.click();
document.body.removechild(link);
url.revokeobject;
}).catch(function(err) {
console.error("生成zip文件出错:", err);
});
}
};
return (
);
}
export default app;
申请临时 license
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。
