Set Column Width to Scalable Unit like em or percent with JavaScript via C++
Contents
[
Hide
]
Generating an HTML file from a spreadsheet is very common. The size of the columns is defined in pt, which works in many cases. However, there may be cases where this fixed size is not appropriate. For example, if a container panel width is 600 px, where this HTML page is displayed, you may get a horizontal scrollbar if the generated table width is larger. It is required that this fixed size be changed to a scalable unit such as em or percent to achieve better presentation. The following sample code can be used, with HtmlSaveOptions.widthScalable set to true, to create scalable widths.
Sample source file and output files can be downloaded from the following links:
outsampleForScalableColumns.zip
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Scalable Columns to HTML</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, HtmlSaveOptions, SaveFormat } = 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));
// Specify HTML Save Options
const options = new HtmlSaveOptions();
// Set the property for scalable width (converted from setWidthScalable)
options.widthScalable = true;
// Specify image save format (converted from setExportImagesAsBase64)
options.exportImagesAsBase64 = true;
// Save the workbook in HTML format with the specified Html Save Options
const outputData = workbook.save(SaveFormat.Html, options);
const blob = new Blob([outputData], { type: 'text/html' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'outsampleForScalableColumns.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">File converted to HTML successfully! Click the download link to get the result.</p>';
});
</script>
</html>