Convertir Excel a HTML con tooltip usando JavaScript vía C++
Contents
[
Hide
]
Convertir Excel a HTML con tooltip
Podría haber casos en los que el texto se corte en el HTML generado y deseas mostrar el texto completo como tooltip en el evento hover. Aspose.Cells for JavaScript vía C++ soporta esto proporcionando la propiedad HtmlSaveOptions.addTooltipText. Configurar la propiedad HtmlSaveOptions.addTooltipText en true agregará el texto completo como tooltip en el HTML generado.
La siguiente imagen muestra el tooltip en el archivo HTML generado.
El siguiente ejemplo carga el archivo fuente de Excel y genera el archivo HTML de salida con el tooltip.
Código de muestra
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Add Tooltip to HTML Example</title>
</head>
<body>
<h1>Add Tooltip to 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 } = 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();
// Instantiate a Workbook from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Create HtmlSaveOptions and enable tooltip text
const options = new HtmlSaveOptions();
options.addTooltipText = true;
// Save workbook as HTML with the specified 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 = 'AddTooltipToHtmlSample_out.html';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download HTML File';
document.getElementById('result').innerHTML = '<p style="color: green;">HTML file created successfully! Click the download link to get the result.</p>';
});
</script>
</html>