在数据可视化应用中，将 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 进行安装：
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 的 WebAssembly 模块，开发人员可以使用 Workbook.SaveChartAsImage() 方法将 Excel 工作表中的特定图表保存为图像，并存储到虚拟文件系统（VFS）中。保存的图像可以下载或用于进一步处理。
具体步骤如下：
- 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS() 方法将 Excel 文件和字体文件加载到 VFS。
- 使用 new wasmModule.Workbook() 方法创建 Workbook 实例。
- 使用 Workbook.LoadFromFile() 方法将 Excel 文件加载到 Workbook 实例中。
- 使用 Workbook.Worksheets.get() 方法获取特定工作表或遍历所有工作表。
- 遍历图表并使用 Workbook.SaveChartAsImage() 方法将其保存为图像，参数包括工作表和图表索引。
- 使用 image.Save() 方法将图像保存到 VFS。
- 下载图像或按需使用。
import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
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);
}
})();
}, []);
// 将图表转换为图片的函数
const SaveExcelChartAsImage = 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 = '示例.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 在VFS中创建图像文件夹 const imageFolderName = `Images`;window.dotnetRuntime.Module.FS.mkdirTree(imageFolderName);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(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}) let filePath = `${imageFolderName}/${sheet.Name}_Chart-${j}.png`;image.Save(filePath);}}// 递归函数，将目录及其内容添加到ZIP中 const addFilesToZip = (folderPath,zipFolder) =>{const items = window.dotnetRuntime.Module.FS.readdir(folderPath);items.filter(item =>item !== "." && item !== "..").forEach((item) =>{const itemPath = `${folderPath}/${item}`;try{// 尝试读取文件数据 const fileData = window.dotnetRuntime.Module.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.createObjectURL(content);link.download = 'img.zip';document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(link.href);}).catch(function(err){console.error("生成ZIP文件时出错:",err);});}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>React中使用JavaScript将Excel图表保存为图像</h1><button onClick={SaveExcelChartAsImage}disabled={!wasmModule}>导出图表 </button></div>);}export default App;
使用 JavaScript 将 Excel 形状保存为图像
开发者可以使用 Worksheet.PrstGeomShapes.get()方法从 Excel 工作表中获取形状，并使用 shape.SaveToImage()方法将其保存为图像。保存的图像可存储在虚拟文件系统（VFS）中，并可下载或用于进一步处理。
具体步骤如下：
- 加载 Spire.Xls.js 文件以初始化 WebAssembly 模块。
- 使用 window.spire.FetchFileToVFS()方法将 Excel 文件和字体文件加载到 VFS。
- 使用 new wasmModule.Workbook()方法创建 Workbook实例。
- 使用 Workbook.LoadFromFile()方法将 Excel 文件加载到 Workbook实例中。
- 使用 Workbook.Worksheets.get()方法获取特定工作表或遍历所有工作表。
- 使用 Worksheet.PrstGeomShapes.get()方法获取单个形状或遍历所有形状。
- 使用 shape.SaveToImage()方法将形状保存为图像。
- 使用 image.Save()方法将图像保存到 VFS。
- 下载图像或按需使用。
import React,{useState,useEffect}from 'react';import JSZip from 'jszip';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);}})();},[]);// 将形状转换为图像的函数 const SaveExcelShapeAsImage = 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 = 'Shape.xlsx';await window.spire.FetchFileToVFS(inputFileName,'',`${process.env.PUBLIC_URL}/static/data/`);// 在VFS中创建图像文件夹 const imageFolderName = `Images`;window.dotnetRuntime.Module.FS.mkdirTree(imageFolderName);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(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++){console.log(sheet.PrstGeomShapes.Count);// 获取当前形状 const shape = sheet.PrstGeomShapes.get(j);// 将形状保存为图像 const image = shape.SaveToImage();// 将图像保存到VFS let filePath = `${imageFolderName}/${sheet.Name}_shape-${j}.png`;image.Save(filePath);}}// 递归函数，将目录及其内容添加到ZIP中 const addFilesToZip = (folderPath,zipFolder) =>{const items = window.dotnetRuntime.Module.FS.readdir(folderPath);items.filter(item =>item !== "." && item !== "..").forEach((item) =>{const itemPath = `${folderPath}/${item}`;try{// 尝试读取文件数据 const fileData = window.dotnetRuntime.Module.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.createObjectURL(content);link.download = 'shapeToimg.zip';document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(link.href);}).catch(function (err){console.error("生成ZIP文件时出错:",err);});}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>在React中用JavaScript将Excel形状保存为图像</h1><button onClick={SaveExcelShapeAsImage}disabled={!wasmModule}>导出形状 </button></div>);}export default App;
申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
