Track Conversion Progress of Excel to TIFF with JavaScript via C++
Possible Usage Scenarios
Sometimes converting large Excel files can take some time. During this time, you might want to show the document conversion progress instead of just a loading screen to enhance the usability of your application. Aspose.Cells for JavaScript via C++ supports tracking document conversion process by providing the IPageSavingCallback interface. The IPageSavingCallback interface provides pageStartSaving(PageStartSavingArgs) and pageEndSaving(PageEndSavingArgs) methods that you can implement in your custom class. You may also control which pages are rendered as demonstrated in the TestPageSavingCallback custom class.
Track Conversion Progress of Excel to TIFF
The following code sample loads the source excel file and prints its conversion progress in the console by using the TestPageSavingCallback custom class that implements the IPageSavingCallback interface. The output file generated is attached for your reference.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Convert Workbook to TIFF</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="convertTiff">Convert to TIFF</button>
<a id="downloadLink" style="display: none;"></a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, ImageOrPrintOptions, WorkbookRender, 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('convertTiff').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
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));
// Create ImageOrPrintOptions and configure for TIFF conversion
const opts = new ImageOrPrintOptions();
// Define TestTiffPageSavingCallback
class TestTiffPageSavingCallback {
// Implement pageSaving as a no-op handler; Aspose.Cells may call this during TIFF generation
pageSaving(args) {
// No-op: default behavior will be used for page saving
// If needed, args (like args.imageStream) can be modified here
}
}
// Assign callback and image type using property assignment (converted from setters)
opts.pageSavingCallback = new TestTiffPageSavingCallback();
opts.imageType = ImageType.Tiff;
// Create WorkbookRender and generate the TIFF image
const wr = new WorkbookRender(workbook, opts);
const outputData = wr.toImage();
// Create a Blob and provide a download link for the generated TIFF
const blob = new Blob([outputData], { type: 'image/tiff' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'DocumentConversionProgressForTiff_out.tiff';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download TIFF File';
resultDiv.innerHTML = '<p style="color: green;">Conversion completed. Click the download link to save the TIFF.</p>';
});
});
</script>
</html>
The following is the code for the TestTiffPageSavingCallback custom class.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - TIFF Page Saving Callback</title>
</head>
<body>
<h1>TIFF Page Saving Callback Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Save as TIFF with Page Callback</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, Worksheet, Cell, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
class TestTiffPageSavingCallback {
pageStartSaving(args) {
console.log(`Start saving page index ${args.pageIndex} of pages ${args.pageCount}`);
// Don't output pages before page index 2.
if (args.pageIndex < 2) {
args.isToOutput = false;
}
}
pageEndSaving(args) {
console.log(`End saving page index ${args.pageIndex} of pages ${args.pageCount}`);
// Don't output pages after page index 8.
if (args.pageIndex >= 8) {
args.hasMorePages = false;
}
}
}
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();
// Instantiating a Workbook object from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Create TIFF save options and assign the page saving callback
const tiffOptions = new AsposeCells.TiffSaveOptions();
tiffOptions.pageSavingCallback = new TestTiffPageSavingCallback();
// Save the workbook as TIFF using the save options
const outputData = workbook.save(SaveFormat.Tiff, tiffOptions);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.tiff';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download TIFF File';
document.getElementById('result').innerHTML = '<p style="color: green;">TIFF saved successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Console Output
Start saving page index 0 of pages 10</br>
End saving page index 0 of pages 10</br>
Start saving page index 1 of pages 10</br>
End saving page index 1 of pages 10</br>
Start saving page index 2 of pages 10</br>
End saving page index 2 of pages 10</br>
Start saving page index 3 of pages 10</br>
End saving page index 3 of pages 10</br>
Start saving page index 4 of pages 10</br>
End saving page index 4 of pages 10</br>
Start saving page index 5 of pages 10</br>
End saving page index 5 of pages 10</br>
Start saving page index 6 of pages 10</br>
End saving page index 6 of pages 10</br>
Start saving page index 7 of pages 10</br>
End saving page index 7 of pages 10</br>
Start saving page index 8 of pages 10</br>
End saving page index 8 of pages 10</br>