To Image

SpreadJS allows you to export shapes, connector shapes or groups of shapes as images.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
Description
app.vue
index.html
Copy to CodeMine

After getting the shape or shape base object, you can get the image source by using the shape.toImageSrc() API.

You can get the shape image sourc using the following code:

    let shapeImageSrc = sheet.shapes.all()[0].toImageSrc();
After getting the shape or shape base object, you can get the image source by using the shape.toImageSrc() API. You can get the shape image sourc using the following code:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread" > </gc-spread-sheets> <div class="options-container"> <div class="option-row"> Try selecting a shape: </div> <div class="option-row"> <img id="selectShapeImage" src="" alt="Original Image"> </div> <div class="option-row"> <input type="button" id="downloadButton" value="Download Image"> </div> </div> </div> </template> <script setup> import GC from "@mescius/spread-sheets"; import { ref, createApp } from "vue"; import "@mescius/spread-sheets-vue"; import "@mescius/spread-sheets-shapes"; const spreadRef = ref(null); async function initSpread(spread) { spread.suspendPaint(); spread.setSheetCount(1); const loadingTip = addLoadingTip(); const res = await fetch('$DEMOROOT$/en/sample/features/shapes/shape-toImage/spread.json'); await spread.fromJSON(await res.json()); loadingTip.remove(); spread.resumePaint(); bindShapesEvent(spread); initPanel(spread); } function addLoadingTip() { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.inset = '0'; div.style.display = 'flex'; div.style.alignItems = 'center'; div.style.justifyContent = 'center'; div.style.background = 'white'; div.style.zIndex = '100'; div.textContent = 'Loading data from server ...'; document.body.appendChild(div); return div; } function bindShapesEvent(spread) { let shapeName; spread.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function (event, args) { let shape = args.shape; if (!shape) { return; } let url = shape.toImageSrc(); shapeName = shape.name(); let imgElement = document.getElementById("selectShapeImage"); let img = new Image(); img.onload = function () { if (img.width <= 250 && img.height <= 250) { imgElement.style.width = "auto"; imgElement.style.height = "auto"; imgElement.src = url; } else { if (img.width > img.height) { imgElement.style.width = "250px"; imgElement.style.height = "auto"; } else { imgElement.style.width = "auto"; imgElement.style.height = "250px"; } imgElement.src = url; } }; img.src = url; }); document.getElementById("downloadButton").addEventListener("click", function () { let imgElement = document.getElementById("selectShapeImage"); let imgUrl = imgElement.src; let a = document.createElement("a"); a.href = imgUrl; a.download = shapeName + ".png"; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); } function initPanel(spread) { let sheet = spread.getActiveSheet(); let shape = sheet.shapes.all()[0]; shape.isSelected(true); let url = shape.toImageSrc(); let imgElement = document.getElementById("selectShapeImage"); imgElement.src = url; } </script> <style scoped> .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding-left: 5px; } .divide-line { width: 100%; height: 1px; background: #cbcbcb; margin-top: 10px; margin-bottom: 3px; } .title { text-align: center; font-weight: bold; } label { display: block; margin-top: 15px; margin-bottom: 5px; } p { padding: 2px 10px; background-color: #f4f8eb; } input { width: 160px; margin-left: 10px; display: inline; } select { width: 160px; margin-left: 10px; display: inline; } textarea { width: 160px; margin-left: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/data/inventory-tracker.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/en/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js' }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);