Image with JavaScript via C++
Converting Workbook to TIFF
An Excel file can contain multiple sheets with multiple pages. WorkbookRender allows you to convert Excel to TIFF with multiple pages. Also, you can control multiple options for TIFF, like ImageOrPrintOptions.tiffCompression, ImageOrPrintOptions.tiffColorDepth, Resolution(ImageOrPrintOptions.horizontalResolution, ImageOrPrintOptions.verticalResolution).
The following code snippet shows how to convert Excel to TIFF with multiple pages. The source Excel file and generated TIFF image are attached for your reference.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Workbook to TIFF (Multiple Pages) Example</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, ImageType, TiffCompression, WorkbookRender } = 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();
// Instantiate workbook from uploaded file
const wb = new Workbook(new Uint8Array(arrayBuffer));
// Configure image/print options
const imgOptions = new ImageOrPrintOptions();
imgOptions.imageType = ImageType.Tiff;
imgOptions.horizontalResolution = 200;
imgOptions.verticalResolution = 200;
imgOptions.tiffCompression = TiffCompression.CompressionLZW;
// Render workbook to image (TIFF)
const workbookRender = new WorkbookRender(wb, imgOptions);
// Obtain image data (multi-page TIFF)
const outputData = workbookRender.toImage();
const blob = new Blob([outputData], { type: "image/tiff" });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'workbook-to-tiff-with-mulitiple-pages.tiff';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download TIFF File';
document.getElementById('result').innerHTML = '<p style="color: green;">TIFF created successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Converting Worksheet to Image
Worksheets contain data that you want to analyze. For example, a worksheet can contain parameters, totals, percentages, exceptions, and calculations.
As a developer, you might need to present worksheets as images. For example, a worksheet can be used as an image in an application or web page. You might want to insert an image into a Microsoft Word document, a PDF file, a PowerPoint presentation or some other document type. Simply put, you want a worksheet rendered as an image so that you can use it somewhere else.
SheetRender ImageOrPrintOptions WorkbookRender
The SheetRender class represents a worksheet to render as images. It has an overloaded method, SheetRender.toImage(number, string), that can convert a worksheet to image file(s) with different attributes or options. It returns a Buffer object and you can save an image file to disk or stream. Several image formats are supported, for example BMP, PNG, GIF, JPG, JPEG, TIFF, EMF.
The following code snippet shows how to convert a worksheet in an Excel file to an image file.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Convert Worksheet To Images By Page</title>
</head>
<body>
<h1>Convert Worksheet To Images By Page</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, 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');
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const sheet = workbook.worksheets.get(0);
// Preparing image/print options
const options = new ImageOrPrintOptions();
options.horizontalResolution = 200;
options.verticalResolution = 200;
options.imageType = ImageType.Tiff;
// Sheet to Image By Page conversion
const sr = new SheetRender(sheet, options);
const pageCount = sr.pageCount;
if (pageCount === 0) {
resultDiv.innerHTML = '<p style="color: red;">No pages found to render.</p>';
return;
}
const linksContainer = document.createElement('div');
linksContainer.innerHTML = '<p style="color: green;">Conversion completed. Download the generated images below:</p>';
for (let j = 0; j < pageCount; j++)
{
// sr.toImage(pageIndex) returns image bytes in browser build
const imageData = sr.toImage(j);
const blob = new Blob([imageData], { type: 'image/tiff' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = "outputConvertWorksheetToImageByPage_" + (j + 1) + ".tif";
link.textContent = "Download Image Page " + (j + 1);
link.style.display = 'block';
linksContainer.appendChild(link);
}
resultDiv.appendChild(linksContainer);
});
</script>
</html>
Converting Worksheet to SVG
SVG stands for Scalable Vector Graphics. SVG is a specification based on XML standards for two-dimensional vector graphics. It is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.
Aspose.Cells for JavaScript via C++ has been able to convert worksheets to SVG image since version 7.1.0. The following code snippet shows how to convert a worksheet in an Excel file to an SVG image file.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Convert Worksheet to SVG Example</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, SaveFormat, SheetType } = 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 () => {
// Instantiate a workbook
const workbook = new Workbook();
// Put sample text in the first cell of the first worksheet in the newly created workbook
workbook.worksheets.get(0).cells.get("A1").putValue("DEMO TEXT ON SHEET1");
// Add second worksheet in the workbook
workbook.worksheets.add(SheetType.Worksheet);
// Set text in the first cell of the second sheet
workbook.worksheets.get(1).cells.get("A1").putValue("DEMO TEXT ON SHEET2");
// Set currently active sheet index to 1 i.e. Sheet2
workbook.worksheets.activeSheetIndex = 1;
// Save workbook to SVG. It shall render the active sheet only to SVG
const outputData = workbook.save(SaveFormat.Svg);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'ConvertWorksheetToSVG_out.svg';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download SVG File';
document.getElementById('result').innerHTML = '<p style="color: green;">SVG generated successfully! Click the download link to get the file.</p>';
});
</script>
</html>