Enable CSS Custom Properties while saving to HTML with JavaScript via C++
Contents
[
Hide
]
Possible Usage Scenarios
When you save your Excel file to HTML, in the scenario where there are multiple occurrences of the same base64 image, the custom property allows the image data to be saved only once, so the performance of the resultant HTML can be improved. Please use the HtmlSaveOptions.enableCssCustomProperties property and set it to true while saving to HTML.
Enable CSS Custom Properties while saving to HTML
The following sample code shows the usage of the HtmlSaveOptions.enableCssCustomProperties property. The screenshot shows the effect of this property when it is not set to true. Please download the sample Excel file used in this code and the output HTML generated by it for reference.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Enable CSS Custom Properties Example</title>
</head>
<body>
<h1>Enable CSS Custom Properties Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx" />
<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, 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");
});
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 HtmlSaveOptions and set properties (converted from setters to property assignments)
const opts = new AsposeCells.HtmlSaveOptions();
opts.exportImagesAsBase64 = true;
opts.enableCssCustomProperties = true;
// Save the workbook to HTML using SaveFormat.Html and provided options
const outputData = workbook.save(SaveFormat.Html, opts);
const blob = new Blob([outputData], { type: 'text/html' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'outputEnableCssCustomProperties.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">HTML saved successfully! Click the download link to get the file.</p>';
});
</script>
</html>