在 React 中使用 JavaScript 保存 Excel 图表和形状为图片

使用 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(/* 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 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;