Exportar gráfico a SVG con atributo viewBox usando JavaScript vía C++
Contents
[
Hide
]
De forma predeterminada, cuando el gráfico se exporta al formato SVG, el atributo viewBox no se incluye en su XML. Sin embargo, Aspose.Cells proporciona la propiedad ImageOrPrintOptions.svgFitToViewPort que, cuando se establece en true, exporta el gráfico a SVG con el atributo viewBox.
Exportar gráfico a SVG con el atributo viewBox
El siguiente código de ejemplo exporta el gráfico al formato SVG con el atributo viewBox.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Chart to SVG Example</title>
</head>
<body>
<h1>Chart to SVG Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Convert Chart to SVG</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, ImageOrPrintOptions, ImageType, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Create workbook object from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access first worksheet
const worksheet = workbook.worksheets.get(0);
// Access first chart inside the worksheet
const chart = worksheet.charts.get(0);
// Set image or print options with SVGFitToViewPort true
const opts = new ImageOrPrintOptions();
opts.imageType = ImageType.Svg;
opts.svgFitToViewPort = true;
// Save the chart to svg format (returns data in browser)
const svgData = await chart.toImage(opts);
// Create blob and download link for SVG
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'Image_out.svg';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download SVG File';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to SVG successfully! Click the download link to get the SVG file.</p>';
});
</script>
</html>
Si abres el SVG del gráfico en el bloc de notas, encontrarás el atributo viewBox similar a este:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<span class="n">width</span><span class="o">=</span><span class="s">"100%"</span> <span class="n">height</span><span class="o">=</span><span class="s">"100%"</span>
<span class="n">viewBox</span><span class="o">=</span><span class="s">"0 0 480 288"</span><span class="o">></span></code></pre></div>