Gestionar celdas de tabla en presentaciones usando JavaScript
Visión general
Aspose.Slides permite acceder y modificar celdas de tabla en presentaciones de PowerPoint. Este artículo explica cómo identificar celdas de tabla combinadas, eliminar los bordes de las celdas, trabajar con la numeración de celdas después de combinar o dividir celdas, cambiar el color de fondo de una celda y agregar una imagen dentro de una celda de tabla. Los ejemplos muestran cómo crear o abrir una presentación, obtener una tabla de una diapositiva, actualizar el formato de la celda mediante sus propiedades, y guardar la presentación modificada como archivo PPTX.
Aspose.Slides utiliza índices basados en cero para acceder a las celdas de tabla en el orden (column, row).
Identificar una celda de tabla combinada
El ejemplo abre una presentación existente y accede a la primera forma de la primera diapositiva como una tabla. Se asume que la diapositiva y la forma existen y que la forma es una tabla. Luego itera a través de todas las filas y columnas y utiliza isMergedCell para identificar celdas en regiones combinadas. Para cada coincidencia, muestra las coordenadas de la celda en orden row;column, getRowSpan, getColSpan, y las coordenadas iniciales de la región, getFirstRowIndex y getFirstColumnIndex.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation("presentation_with_table.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const table = slide.getShapes().get_Item(0);
const rowCount = table.getRows().size();
for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
const columnCount = table.getColumns().size();
for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
const cell = table.get_Item(columnIndex, rowIndex);
if (cell.isMergedCell()) {
console.log("Cell %d;%d belongs to a merged region with RowSpan=%d and ColSpan=%d starting at %d;%d.", rowIndex, columnIndex, cell.getRowSpan(), cell.getColSpan(), cell.getFirstRowIndex(), cell.getFirstColumnIndex());
}
}
}
} finally {
presentation.dispose();
}
Eliminar los bordes de las celdas de tabla
Cree una Presentation y añada una tabla a su primera diapositiva con addTable. Los anchos de columna, alturas de fila y la posición de la tabla se especifican en puntos. El ejemplo establece los cuatro bordes de la celda en FillType.NoFill, haciéndolos invisibles.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const columnWidths = java.newArray("double", [50, 50, 50, 50]);
const rowHeights = java.newArray("double", [50, 30, 30, 30, 30]);
const table = slide.getShapes().addTable(100, 50, columnWidths, rowHeights);
for (let rowIndex = 0; rowIndex < table.getRows().size(); rowIndex++) {
const row = table.getRows().get_Item(rowIndex);
for (let columnIndex = 0; columnIndex < row.size(); columnIndex++) {
const cell = row.get_Item(columnIndex);
cell.getCellFormat().getBorderTop().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
cell.getCellFormat().getBorderBottom().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
cell.getCellFormat().getBorderLeft().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
cell.getCellFormat().getBorderRight().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
}
}
presentation.save("table.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Combinar celdas de tabla
Utilice mergeCells para combinar un rango rectangular de celdas de tabla en una sola celda. Especifique las celdas en las esquinas superior izquierda e inferior derecha del rango. El argumento final controla si la combinación puede incluir celdas fuera del rango especificado; false mantiene la combinación dentro de ese rango.
El ejemplo crea una tabla de 4 × 4 con columnas y filas de 70 puntos, luego combina las cuatro celdas centrales desde (1, 1) hasta (2, 2). La celda resultante abarca dos columnas y dos filas, mientras que la cuadrícula subyacente de la tabla mantiene cuatro columnas y cuatro filas. Para acceder al contenido o formato de la celda combinada, utilice su posición superior izquierda: table.get_Item(1, 1) en este ejemplo. Las demás posiciones del rango combinado siguen formando parte de la cuadrícula de la tabla, por lo que los índices de las celdas fuera del rango no cambian.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const columnWidths = java.newArray("double", [70, 70, 70, 70]);
const rowHeights = java.newArray("double", [70, 70, 70, 70]);
const table = slide.getShapes().addTable(100, 50, columnWidths, rowHeights);
table.mergeCells(table.get_Item(1, 1), table.get_Item(2, 2), false);
presentation.save("merged_cells.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Dividir celdas de tabla
La combinación de celdas en el ejemplo anterior conserva la cuadrícula de la tabla. Dividir una celda puede introducir una nueva columna en la cuadrícula y cambiar los índices de columna de las celdas a su derecha. Aspose.Slides sigue el modelo de cuadrícula de tablas de PowerPoint.
Este ejemplo crea una tabla de 4 × 4 con columnas y filas de 70 puntos y llama a splitByWidth sobre la celda (1, 1). La mitad del ancho de 70 puntos de la celda se pasa para crear dos celdas de ancho igual.
Tras esta división, las dos mitades se acceden como table.get_Item(1, 1) y table.get_Item(2, 1). La cuadrícula de la tabla ahora tiene cinco columnas: las celdas que originalmente estaban en las columnas 2 y 3 se desplazan a las columnas 3 y 4, respectivamente. Los índices de fila permanecen sin cambios. Utilice estos índices de columna actualizados al acceder a las celdas después de la división.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const columnWidths = java.newArray("double", [70, 70, 70, 70]);
const rowHeights = java.newArray("double", [70, 70, 70, 70]);
const table = slide.getShapes().addTable(100, 50, columnWidths, rowHeights);
table.get_Item(1, 1).splitByWidth(table.get_Item(1, 1).getWidth() / 2);
presentation.save("split_cells.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Dividir celdas combinadas por extensión de fila o columna
Para preparar celdas de plantilla combinadas para la población de datos, utilice splitByRowSpan para dividir a lo largo de un límite de fila existente, o splitByColSpan para dividir a lo largo de un límite de columna.
El argumento index cuenta filas en la parte superior o columnas en la parte izquierda de la división; es relativo a la región combinada:
- División de fila:
0 < index <getRowSpan. - División de columna:
0 < index <getColSpan.
El ejemplo supone que una presentación tiene una tabla como la primera forma en la primera diapositiva, con (1, 2) y (1, 3) combinados verticalmente. Partiendo de la posición inferior, utiliza getFirstColumnIndex y getFirstRowIndex para localizar el origen y verifica ambas extensiones. splitByRowSpan(1) separa entonces las filas 2 y 3 para los nombres de productos. Para una combinación horizontal de dos columnas, utilice splitByColSpan(1).
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation("table_template.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const table = slide.getShapes().get_Item(0);
const selectedCell = table.get_Item(1, 3);
const firstColumnIndex = selectedCell.getFirstColumnIndex();
const firstRowIndex = selectedCell.getFirstRowIndex();
const mergedCell = table.get_Item(firstColumnIndex, firstRowIndex);
if (mergedCell.isMergedCell() && mergedCell.getRowSpan() == 2 && mergedCell.getColSpan() == 1) {
mergedCell.splitByRowSpan(1);
// Recuperar las celdas resultantes de la tabla tras la división.
const upperCell = table.get_Item(firstColumnIndex, firstRowIndex);
const lowerCell = table.get_Item(firstColumnIndex, firstRowIndex + 1);
console.log("Upper cell merged: " + upperCell.isMergedCell());
console.log("Lower cell merged: " + lowerCell.isMergedCell());
upperCell.getTextFrame().setText("Product A");
lowerCell.getTextFrame().setText("Product B");
presentation.save("split_template.pptx", aspose.slides.SaveFormat.Pptx);
} else {
console.log("Select a merged region spanning exactly two rows and one column.");
}
} finally {
presentation.dispose();
}
La cuadrícula de la tabla y los índices de las celdas circundantes permanecen sin cambios. Recupere las celdas resultantes por sus coordenadas; aquí, ambas tienen extensiones de 1 y isMergedCell devuelve false. Las regiones más grandes pueden permanecer parcialmente combinadas después de una división.
El texto original y su formato permanecen en la celda superior (o izquierda); la nueva celda está vacía pero hereda el formato de celda como relleno, bordes y márgenes. Rellene las celdas después de dividir y establezca explícitamente cualquier formato de texto necesario.
La presentación guardada contiene celdas separadas “Product A” y “Product B” con el formato de celda de la plantilla conservado. Consulte la Cell API Reference para obtener más detalles.
Cambiar el color de fondo de la celda de tabla
Este ejemplo crea una tabla con columnas de 150 puntos y filas de 50 puntos. Utiliza setFillType para seleccionar un relleno sólido y establece el color devuelto por getSolidFillColor a rojo para la celda (2, 3), en la tercera columna y cuarta fila.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const columnWidths = java.newArray("double", [150, 150, 150, 150]);
const rowHeights = java.newArray("double", [50, 50, 50, 50, 50]);
const table = slide.getShapes().addTable(50, 50, columnWidths, rowHeights);
const cell = table.get_Item(2, 3);
cell.getCellFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
cell.getCellFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
presentation.save("cell_background_color.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Agregar una imagen dentro de una celda de tabla
Coloque la imagen de entrada en el directorio de trabajo antes de ejecutar este ejemplo. Carga la imagen con Images.fromFile y la agrega a la colección de imágenes de la presentación con addImage. Luego asigna la imagen al relleno de imagen de la celda (0, 0), la primera celda de la tabla.
PictureFillMode.Stretch estira la imagen para rellenar la celda, lo que puede cambiar su relación de aspecto. Los anchos de columna y alturas de fila están en puntos. La imagen cargada se elimina en un bloque finally después de ser añadida a la presentación.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const columnWidths = java.newArray("double", [150, 150, 150, 150]);
const rowHeights = java.newArray("double", [100, 100, 100, 100, 90]);
const table = slide.getShapes().addTable(50, 50, columnWidths, rowHeights);
let ppImage;
const image = aspose.slides.Images.fromFile("aspose_logo.jpg");
try {
ppImage = presentation.getImages().addImage(image);
} finally {
image.dispose();
}
table.get_Item(0, 0).getCellFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Picture));
table.get_Item(0, 0).getCellFormat().getFillFormat().getPictureFillFormat().setPictureFillMode(aspose.slides.PictureFillMode.Stretch);
table.get_Item(0, 0).getCellFormat().getFillFormat().getPictureFillFormat().getPicture().setImage(ppImage);
presentation.save("table_cell_with_image.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Preguntas frecuentes
¿Puedo establecer diferentes grosores y estilos de línea para los distintos lados de una única celda?
Sí. Los bordes top/bottom/left/right tienen propiedades independientes, por lo que el grosor y el estilo de cada lado pueden diferir.
¿Qué ocurre con la imagen si cambio el tamaño de la columna/fila después de establecer una imagen como fondo de la celda?
El comportamiento depende del fill mode (stretch/tile). Con estiramiento, la imagen se ajusta a la nueva celda; con mosaico, los mosaicos se recalculan.
¿Puedo asignar un hipervínculo a todo el contenido de una celda?
Hyperlinks se establecen a nivel de texto (porción) dentro del marco de texto de la celda o a nivel de toda la tabla/forma. En la práctica, asigna el vínculo a una porción o a todo el texto de la celda.
¿Puedo establecer diferentes fuentes dentro de una única celda?
Sí. El marco de texto de una celda admite portions (segmentos) con formato independiente—familia de fuente, estilo, tamaño y color.