Exportar CSS de la hoja de trabajo por separado en HTML de salida con JavaScript vía C++
Escenarios de uso posibles
Aspose.Cells for JavaScript vía C++ ofrece la función de exportar CSS de la hoja de trabajo por separado cuando conviertes tu archivo de Excel a HTML. Usa la propiedad HtmlSaveOptions.exportWorksheetCSSSeparately para este propósito y configúrala en true al guardar el archivo de Excel en formato HTML.
Exportar la hoja de estilos CSS por separado en el HTML de salida
El siguiente código de ejemplo crea un archivo de Excel, agrega algo de texto en la celda B5 en color Rojo y luego lo guarda en formato HTML usando la propiedad HtmlSaveOptions.exportWorksheetCSSSeparately. Por favor, mira el HTML de salida generado por el código para referencia. Encontrarás stylesheet.css dentro de él como resultado del código de ejemplo.
Código de muestra
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Export Worksheet CSS Separately Example</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, 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 () => {
// Create a new workbook
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 - export worksheet css separately
const opts = new HtmlSaveOptions();
opts.exportWorksheetCSSSeparately = true;
// 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 = 'outputExportWorksheetCSSSeparately.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook saved as HTML. Click the download link to get the file.</p>';
});
</script>
</html>
Exportar un libro de una sola hoja a HTML
Cuando conviertes un libro con varias hojas a HTML usando Aspose.Cells for JavaScript vía C++, crea un archivo HTML junto con una carpeta que contiene CSS y múltiples archivos HTML. Cuando abres este archivo HTML en el navegador, las pestañas son visibles. El mismo comportamiento se requiere para un libro con una sola hoja cuando se convierte a HTML. Anteriormente, no se creaba una carpeta separada para libros con una sola hoja, y solo se creaba un archivo HTML. Dicho archivo HTML no muestra pestañas cuando se abre en el navegador. MS Excel también crea una carpeta adecuada y HTML para una sola hoja, y por eso se implementa el mismo comportamiento usando las APIs de Aspose.Cells. El archivo de ejemplo puede ser descargado desde el siguiente enlace para usar en el código de ejemplo a continuación:
Código de muestra
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Save Workbook as HTML Example</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, EncodingType, 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 resultDiv = document.getElementById('result');
const fileInput = document.getElementById('fileInput');
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 by loading the selected file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Specify HTML save options
const options = new HtmlSaveOptions();
// Set optional settings (converted from setters to properties)
options.encoding = EncodingType.UTF8;
options.exportImagesAsBase64 = true;
options.exportGridLines = true;
options.exportSimilarBorderStyle = true;
options.exportBogusRowData = true;
options.excludeUnusedStyles = true;
options.exportHiddenWorksheet = true;
// Save the workbook in HTML format with specified HtmlSaveOptions
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 = 'outputSampleSingleSheet.htm';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
resultDiv.innerHTML = '<p style="color: green;">Workbook saved to HTML. Click the download link to get the file.</p>';
});
</script>
</html>