Render Worksheet to Graphic Context with JavaScript via C++
Contents
[
Hide
]
Aspose.Cells can now render worksheets to graphic context. Graphic context can be anything like an image file, screen, or printer, etc. Please use one of the following two methods to render a worksheet to graphic context.
The following code illustrates how to use Aspose.Cells to render a worksheet to graphic context. Once you execute the code, it will print the entire worksheet and fill the leftover empty space with blue color in the graphic context and save the image as **OutputImage_out_.png** file. You can use any source Excel file to try this code. Please also read the comments inside the code for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Render Worksheet to Image</title>
</head>
<body>
<h1>Render Worksheet to Image</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</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, SheetRender, 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);
// Create empty image buffer options
const bmpOptions = new ImageOrPrintOptions();
bmpOptions.onePagePerSheet = true;
// Render worksheet to image
const sheetRender = new SheetRender(worksheet, bmpOptions);
const imageData = sheetRender.toImage(0);
// Create blob and provide download link for PNG
const blob = new Blob([imageData], { type: 'image/png' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'OutputImage_out.png';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Image';
document.getElementById('result').innerHTML = '<p style="color: green;">Image rendered successfully! Click the download link to download the PNG.</p>';
});
</script>
</html>