Prefissa gli stili degli elementi della tabella con la proprietà HtmlSaveOptions.tableCssId in JavaScript via C++
Contents
[
Hide
]
Possibili Scenari di Utilizzo
Aspose.Cells ti permette di prefissare gli stili degli elementi della tabella con la proprietà HtmlSaveOptions.tableCssId. Supponi di impostare questa proprietà con un valore come MyTest_TableCssId, allora troverai gli stili degli elementi della tabella come mostrato sotto:
table#MyTest_TableCssId
#MyTest_TableCssId tr
#MyTest_TableCssId col
#MyTest_TableCssId br
etc.
L’immagine seguente mostra l’effetto di usare la proprietà HtmlSaveOptions.tableCssId sul HTML di output.
Prefissare gli stili degli elementi della tabella con la proprietà HtmlSaveOptions.tableCssId
Il seguente esempio di codice dimostra come usare la proprietà HtmlSaveOptions.tableCssId. Si prega di controllare il HTML di output generato dal codice come riferimento.
Codice di Esempio
<!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>