Prefix Table Elements Styles with HtmlSaveOptions.tableCssId property in JavaScript via C++
Contents
[
Hide
]
Possible Usage Scenarios
Aspose.Cells allows you to prefix table elements styles with HtmlSaveOptions.tableCssId property. Suppose, you set this property with some value like MyTest_TableCssId, then you will find table elements styles like shown below:
table#MyTest_TableCssId
#MyTest_TableCssId tr
#MyTest_TableCssId col
#MyTest_TableCssId br
etc.
The following screenshot shows the effect of using HtmlSaveOptions.tableCssId property on output HTML.
Prefix Table Elements Styles with HtmlSaveOptions.tableCssId property
The following sample code demonstrates how to make use of HtmlSaveOptions.tableCssId property. Please check the output HTML generated by the code for a reference.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Example - Set Cell Style and Save as HTML with Table CSS ID</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, HtmlSaveOptions, Color } = 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 === 0) {
// No file selected - create a new workbook as in original JavaScript sample
const wb = new Workbook();
// Access first worksheet
const ws = wb.worksheets.get(0);
// Access cell B5 and put value inside it
const cell = ws.cells.get("B5");
cell.value = "This is some text.";
// Set the style of the cell - font color is Red
const st = cell.style;
st.font.color = Color.Red;
cell.style = st;
// Specify html save options - specify table css id
const opts = new HtmlSaveOptions();
opts.tableCssId = "MyTest_TableCssId";
// Save the workbook in html
const outputData = wb.save(SaveFormat.Html, opts);
const blob = new Blob([outputData], { type: 'text/html' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'outputTableCssId.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the HTML file.</p>';
return;
}
// If a file is provided, open it and apply the same changes
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
const wb = new Workbook(new Uint8Array(arrayBuffer));
// Access first worksheet
const ws = wb.worksheets.get(0);
// Access cell B5 and put value inside it
const cell = ws.cells.get("B5");
cell.value = "This is some text.";
// Set the style of the cell - font color is Red
const st = cell.style;
st.font.color = Color.Red;
cell.style = st;
// Specify html save options - specify table css id
const opts = new HtmlSaveOptions();
opts.tableCssId = "MyTest_TableCssId";
// Save the workbook in html
const outputData = wb.save(SaveFormat.Html, opts);
const blob = new Blob([outputData], { type: 'text/html' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'outputTableCssId.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the HTML file.</p>';
});
</script>
</html>