Gestionar Comentarios y Notas con JavaScript vía C++
Introducción
Los comentarios se utilizan para agregar información adicional a las celdas. Aspose.Cells for JavaScript vía C++ ofrece dos métodos para agregar comentarios a las celdas. El primero es crear comentarios en un archivo de diseñador manualmente. Estos comentarios luego se importan usando Aspose.Cells. El segundo es agregar comentarios usando la API de Aspose.Cells en tiempo de ejecución. Este tema discute cómo agregar comentarios a las celdas usando la API de Aspose.Cells. También se explicará el formateo de comentarios.
Agregar un comentario
Agregue un comentario a una celda llamando al método CommentCollection.add(number, number) de la colección Comments (encapsulado en el objeto Worksheet). El nuevo objeto Comment se puede acceder desde la colección Comments pasando su índice de comentario. Después de acceder al objeto Comment, personalice la nota del comentario usando la propiedad note.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Add Comment 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 } = 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 () => {
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding a comment to "F5" cell
const commentIndex = worksheet.comments.add("F5");
// Accessing the newly added comment
const comment = worksheet.comments.get(commentIndex);
// Setting the comment note
comment.note = "Hello Aspose!";
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Comment added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Formato de comentario
También es posible dar formato a la apariencia de los comentarios configurando su altura, ancho y ajustes de fuente.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Comment</title>
</head>
<body>
<h1>Add Comment 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 } = 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 () => {
// Creating a new Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding a comment to "F5" cell
const commentIndex = worksheet.comments.add("F5");
// Accessing the newly added comment
const comment = worksheet.comments.get(commentIndex);
// Setting the comment note
comment.note = "Hello Aspose!";
// Setting the font size of a comment to 14
comment.font.size = 14;
// Setting the font of a comment to bold
comment.font.isBold = true;
// Setting the height of the font to 10
comment.heightCM = 10;
// Setting the width of the font to 2
comment.widthCM = 2;
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and saved. Click the download link to get the file.</p>';
});
</script>
</html>
Agregar una imagen al comentario
Con Microsoft Excel 2007, también es posible tener una imagen como fondo de un comentario de celda. En Excel 2007, esto se logra siguiendo los siguientes pasos. (Se supone que ya ha agregado un comentario de celda)
- Haga clic con el botón derecho en la celda que contiene el comentario.
- Seleccione Mostrar/Ocultar comentarios, y elimine cualquier texto del comentario.
- Haga clic en el borde del comentario para seleccionarlo.
- Seleccione Formato, luego Comentario.
- En la pestaña Colores y líneas, expanda la lista de Color.
- Haga clic en Efectos de relleno.
- En la pestaña Imagen, haga clic en Seleccionar imagen.
- Ubique y seleccione la imagen.
- Haga clic en Aceptar hasta que se cierren todos los diálogos.
Aspose.Cells también proporciona esta función. A continuación se muestra un ejemplo de código que crea un archivo XLSX desde cero, agregando un comentario a la celda “A1” con una imagen como fondo.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Comment with Image</title>
</head>
<body>
<h1>Add Comment with Image Example</h1>
<p>
Select an existing Excel file to modify (optional). If no file is selected, a new workbook will be created.
</p>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<p>
Select an image file to attach to the comment (required):
</p>
<input type="file" id="imageInput" accept="image/*" />
<br/><br/>
<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, Worksheet, Cell } = 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 resultEl = document.getElementById('result');
resultEl.innerHTML = '';
const fileInput = document.getElementById('fileInput');
const imageInput = document.getElementById('imageInput');
if (!imageInput.files.length) {
resultEl.innerHTML = '<p style="color: red;">Please select an image file for the comment.</p>';
return;
}
// Load or create workbook
let workbook;
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Get a reference of comments collection with the first sheet
const comments = workbook.worksheets.get(0).comments;
// Add a comment to cell A1
const commentIndex = comments.add(0, 0);
const comment = comments.get(commentIndex);
// Set the comment note and font name (converted from set/get to properties)
comment.note = "First note.";
comment.font.name = "Times New Roman";
// Load image file data
const imgFile = imageInput.files[0];
const imgArrayBuffer = await imgFile.arrayBuffer();
const imgUint8 = new Uint8Array(imgArrayBuffer);
// Set image data to the shape associated with the comment
comment.commentShape.fill.imageData = imgUint8;
// Save the workbook to browser-downloadable file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultEl.innerHTML = '<p style="color: green;">Comment added with image successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>