Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Cet article fournit des exemples de code qui montrent comment créer des tables et contrôler la mise en forme à l’aide de l’API JavaScript PowerPoint.
Créer une table vide
Pour créer une table vide, appelez la méthode ShapeCollection.addTable() et spécifiez le nombre de lignes et de colonnes dont la table a besoin. L’exemple de code suivant montre comment créer une table avec 3 lignes et 4 colonnes.
await PowerPoint.run(async (context) => {
const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
// Add a table (which is a type of Shape).
const shape = shapes.addTable(3, 4);
await context.sync();
});
Comme l’exemple précédent ne spécifie aucune option, la mise en forme par défaut du tableau est fournie par PowerPoint. L’image suivante montre un exemple de table vide créée avec la mise en forme par défaut dans PowerPoint.
Spécifier des valeurs
Vous pouvez remplir la table avec des valeurs de chaîne lorsque vous la créez. Pour ce faire, fournissez un tableau à 2 dimensions de valeurs dans l’objet TableAddOptions . L’exemple de code suivant crée une table avec des valeurs de chaîne comprises entre « 1 » et « 12 ». Veuillez prendre en compte les éléments suivants:
- Une cellule vide doit être spécifiée sous la forme d’une chaîne vide « ». Si une valeur n’est pas définie ou est manquante,
addTablelève une erreur. - Le tableau externe contient une liste de lignes. Chaque ligne est un tableau interne contenant une liste de valeurs de cellule de chaîne.
- La fonction nommée
insertTableOnCurrentSlideest utilisée dans d’autres exemples de cet article.
async function run() {
const options: PowerPoint.TableAddOptions = {
values: [
["1", "2", "", "4"], // Cell 3 is blank.
["5", "6", "7", "8"],
["9", "10", "11", "12"]
],
};
await insertTableOnCurrentSlide(3, 4, options);
}
async function insertTableOnCurrentSlide(rowCount: number, columnCount: number, options: PowerPoint.TableAddOptions) {
await PowerPoint.run(async (context) => {
const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
// Add a table (which is a type of Shape).
const shape = shapes.addTable(rowCount, columnCount, options);
await context.sync();
});
}
L’exemple précédent crée une table avec des valeurs comme illustré dans l’image suivante.
Spécifier la mise en forme des cellules
Vous pouvez spécifier la mise en forme des cellules lorsque vous créez un tableau, notamment le style de bordure, le style de remplissage, le style de police, l’alignement horizontal, le niveau de retrait et l’alignement vertical. Ces formats sont spécifiés par l’objet TableCellProperties .
Mise en forme uniforme des cellules
La mise en forme uniforme des cellules s’applique à l’ensemble du tableau. Par exemple, si vous définissez la couleur de police uniforme sur blanc, toutes les cellules du tableau utilisent la police blanche. La mise en forme uniforme des cellules est utile pour contrôler la mise en forme par défaut souhaitée sur l’ensemble du tableau.
Spécifiez la mise en forme uniforme des cellules pour l’ensemble du tableau à l’aide de la propriété TableAddOptions.uniformCellProperties . L’exemple de code suivant montre comment définir toutes les cellules du tableau sur la couleur de remplissage bleu ardoise foncé et la police blanche en gras.
const rowCount = 3;
const columnCount = 4;
const options: PowerPoint.TableAddOptions = {
values: [
["1", "2", "", "4"],
["5", "6", "7", "8"],
["9", "10", "11", "12"]
],
uniformCellProperties: {
fill: { color: "darkslateblue" },
font: { bold: true, color: "white" }
}
};
await insertTableOnCurrentSlide(rowCount, columnCount, options);
L’exemple précédent crée une table, comme illustré dans l’image suivante.
Mise en forme spécifique des cellules
La mise en forme de cellule spécifique s’applique à des cellules individuelles et remplace la mise en forme uniforme des cellules, le cas échéant. Définissez la mise en forme des cellules individuelles à l’aide de la propriété TableAddOptions.specificCellProperties . L’exemple de code suivant montre comment définir la couleur de remplissage sur noir pour la cellule de la ligne 1, colonne 1.
Notez que doit specificCellProperties être un tableau 2D qui correspond exactement à la taille 2D de la table. L’exemple crée d’abord l’intégralité du tableau 2D vide d’objets. Ensuite, il définit le format de cellule spécifique à la ligne 1, colonne 1, après la création de l’objet options.
const rowCount = 3;
const columnCount = 4;
// Compact syntax to create a 2D array filled with empty and distinct objects.
const specificCellProperties = Array(rowCount).fill("").map(_ => Array(columnCount).fill("").map(_ => ({})));
const options: PowerPoint.TableAddOptions = {
values: [
["1", "2", "", "4"],
["5", "6", "7", "8"],
["9", "10", "11", "12"]
],
uniformCellProperties: {
fill: { color: "darkslateblue" },
font: { bold: true, color: "white" }
},
specificCellProperties // Array values are empty objects at this point.
};
// Set fill color for specific cell at row 1, column 1.
options.specificCellProperties[1][1] = {
fill: { color: "black" }
};
await insertTableOnCurrentSlide(rowCount, columnCount, options);
L’exemple précédent crée un tableau avec un format spécifique appliqué à la cellule de la ligne 1, colonne 1, comme illustré dans l’image suivante.
L’exemple précédent utilise la propriété font qui est de type FontProperties. La font propriété vous permet de spécifier de nombreuses propriétés, telles que gras, italique, nom, couleur, etc. L’exemple de code suivant montre comment spécifier plusieurs propriétés pour une police pour une cellule.
options.specificCellProperties[1][1] = {
font: {
color: "orange",
name: "Arial",
size: 50,
allCaps: true,
italic: true
}
};
Vous pouvez également spécifier une propriété fill de type FillProperties. La fill propriété peut spécifier une couleur et le pourcentage de transparence. L’exemple de code suivant montre comment créer un remplissage pour toutes les cellules du tableau à l’aide de la couleur « rouge foncé » et d’une transparence de 50 %.
uniformCellProperties: {
fill: {
color: "darkred",
transparency: 0.5
}
}
Bordures
Utilisez l’objet TableCellProperties.borders pour définir des bordures pour les cellules du tableau. L’exemple de code suivant montre comment définir les bordures d’une cellule de la ligne 1 par colonne 1 sur une bordure rouge de poids 3.
const columnCount = 3;
const rowCount = 3;
// Compact syntax to create a 2D array filled with empty and distinct objects.
const specificCellProperties = Array(rowCount).fill(undefined).map(_ => Array(columnCount).fill(undefined).map(_ => ({})));
const options: PowerPoint.TableAddOptions = {
values: [
["1", "2", "3"],
["4", "5", "6"],
["7", "8", "9"]
],
uniformCellProperties: {
fill: {
color: "lightcyan",
transparency: 0.5
},
},
specificCellProperties
};
options.specificCellProperties[1][1] = {
font: {
color: "red",
name: "Arial",
size: 50,
allCaps: true,
italic: true
},
borders: {
bottom: {
color: "red",
weight: 3
},
left: {
color: "red",
weight: 3
},
right: {
color: "red",
weight: 3
},
top: {
color: "red",
weight: 3
}
}
};
await insertTableOnCurrentSlide(rowCount, columnCount, options);
Alignement horizontal et vertical
Utilisez la propriété TableCellProperties.horizontalAlignment pour contrôler l’alignement du texte dans une cellule. L’exemple suivant montre comment définir l’alignement horizontal sur gauche, droite et centre pour trois cellules d’un tableau. Pour obtenir la liste de toutes les options d’alignement, consultez l’énumération ParagraphHorizontalAlignment .
const rowCount = 3;
const columnCount = 3;
// Compact syntax to create a 2D array filled with empty and distinct objects.
const specificCellProperties = Array(rowCount).fill("").map(_ => Array(columnCount).fill("").map(_ => ({})));
const options: PowerPoint.TableAddOptions = {
values: [
["Left aligned, top", "\n\n", ""],
["Centered", "\n\n", ""],
["Right aligned, bottom", "\n\n", ""]
],
uniformCellProperties: {
fill: { color: "lightblue" },
borders: {
bottom: {
color: "black",
weight: 3
},
left: {
color: "black",
weight: 3
},
right: {
color: "black",
weight: 3
},
top: {
color: "black",
weight: 3
}
}
},
specificCellProperties // Array values are empty objects at this point.
};
options.specificCellProperties[0][0] = {
horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.left,
verticalAlignment: PowerPoint.TextVerticalAlignment.top
};
options.specificCellProperties[1][0] = {
horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.center,
verticalAlignment: PowerPoint.TextVerticalAlignment.middle
};
options.specificCellProperties[2][0] = {
horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.right,
verticalAlignment: PowerPoint.TextVerticalAlignment.bottom
};
await insertTableOnCurrentSlide(3, 3, options);
L’exemple précédent crée un tableau avec un alignement de texte gauche/haut, centré et droit/bas, comme illustré dans l’image suivante.
Spécifier des largeurs de ligne et de colonne
Spécifiez des largeurs de ligne et de colonne à l’aide des propriétés TableAddOptions.rows et TableAddOptions.columns . La rows propriété est un tableau de TableRowProperties que vous utilisez pour définir la propriété rowHeight de chaque ligne. De même, la columns propriété est un tableau de TableColumnProperties que vous utilisez pour définir la propriété columnWidth de chaque colonne. La largeur ou la hauteur est définie en points.
PowerPoint peut ne pas respecter la hauteur ou la largeur que vous définissez s’il doit s’adapter au texte. Par exemple, si le texte est trop large pour une colonne, PowerPoint augmente la hauteur de la ligne afin qu’il puisse inclure le texte à la ligne suivante. De même, la largeur de colonne augmente si la taille spécifiée est inférieure à celle d’un seul caractère dans la taille de police spécifiée.
L’exemple de code suivant montre comment définir la hauteur de ligne et la largeur de colonne pour une nouvelle table. Notez que les propriétés de lignes et de colonnes doivent être définies sur un tableau d’objets égal à leur nombre.
const columnCount = 3;
const rowCount = 3;
const options: PowerPoint.TableAddOptions = {
values: [
["Width 72pt", "Width 244pt", "Width 100pt"],
["", "", ""],
["", "^\n\nHeight 200 pt\n\nv", ""]
],
// Initialize columns with an array of empty objects for each column.
columns: Array(columnCount).fill("").map(_ => ({})),
rows: Array(columnCount).fill("").map(_ => ({})),
uniformCellProperties: {
fill: { color: "lightcyan" },
horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.center,
verticalAlignment: PowerPoint.TextVerticalAlignment.middle,
borders: {
bottom: {
color: "black",
weight: 3
},
left: {
color: "black",
weight: 3
},
right: {
color: "black",
weight: 3
},
top: {
color: "black",
weight: 3
}
}
}
};
options.columns[0].columnWidth = 72;
options.columns[1].columnWidth = 244;
options.columns[2].columnWidth = 100;
options.rows[2].rowHeight = 200;
await insertTableOnCurrentSlide(rowCount, columnCount, options);
L’exemple précédent crée un tableau avec trois largeurs de colonne personnalisées et une hauteur de ligne personnalisée, comme illustré dans l’image suivante.
Spécifier les zones fusionnées
Une zone fusionnée est deux cellules ou plus combinées afin qu’elles partagent une valeur et un format uniques. En apparence, la zone fusionnée s’étend sur plusieurs lignes ou colonnes. Une zone fusionnée est indexée par son emplacement de cellule de tableau supérieur gauche (ligne, colonne) lors de la définition de sa valeur ou de son format. La cellule supérieure gauche de la zone fusionnée est toujours utilisée pour définir la valeur et la mise en forme. Toutes les autres cellules de la zone fusionnée doivent être des chaînes vides sans mise en forme appliquée.
Pour spécifier une zone fusionnée, indiquez l’emplacement supérieur gauche où commence la zone (ligne, colonne) et la longueur de la zone dans les lignes et les colonnes. Le diagramme suivant montre un exemple de ces valeurs pour une zone fusionnée d’une taille de 3 lignes par 2 colonnes. Notez que les zones fusionnées ne peuvent pas se chevaucher.
Utilisez la propriété TableAddOptions.mergedAreas pour spécifier une ou plusieurs zones fusionnées. L’exemple de code suivant montre comment créer une table avec deux zones fusionnées. À propos de l’exemple de code, notez ce qui suit :
La propriété values doit uniquement spécifier la valeur du coin supérieur gauche de la zone fusionnée. Toutes les autres valeurs de cellule dans la zone fusionnée doivent spécifier des chaînes vides (« »).
Chaque zone fusionnée doit spécifier l’emplacement du coin supérieur gauche (ligne, colonne) et la longueur dans les cellules de la zone fusionnée en termes de nombre de lignes et de colonnes.
const rowCount = 3;
const columnCount = 4;
// Compact syntax to create a 2D array filled with empty and distinct objects.
const specificCellProperties = Array(rowCount).fill("").map(_ => Array(columnCount).fill("").map(_ => ({})));
const options: PowerPoint.TableAddOptions = {
values: [
["1", "This is a merged cell", "", "4"],
["5", "6", "This is also a merged cell", "8"],
["9", "10", "", "12"]
],
uniformCellProperties: {
fill: { color: "darkslateblue" },
font: { bold: true, color: "white" },
borders: {
bottom: {
color: "black",
weight: 3
},
left: {
color: "black",
weight: 3
},
right: {
color: "black",
weight: 3
},
top: {
color: "black",
weight: 3
}
}
},
mergedAreas: [{ rowIndex: 0, columnIndex: 1, rowCount: 1, columnCount: 2 },
{ rowIndex: 1, columnIndex: 2, rowCount: 2, columnCount: 1 }
],
specificCellProperties // Array values are empty objects at this point.
};
// Set fill color for specific cell at row 1, column 1.
options.specificCellProperties[1][1] = {
fill: { color: "black" }
};
await insertTableOnCurrentSlide(rowCount, columnCount, options);
L’exemple précédent crée une table avec deux zones fusionnées, comme illustré dans l’image suivante.
Obtenir et définir des valeurs de cellule de tableau
Une fois qu’une table est créée, vous pouvez obtenir ou définir des valeurs de chaîne dans les cellules. Notez qu’il s’agit de la seule partie d’une table que vous pouvez modifier. Vous ne pouvez pas modifier les bordures, les polices, les largeurs ou d’autres propriétés de cellule. Si vous devez mettre à jour une table, supprimez-la et recréez-la. L’exemple de code suivant montre comment rechercher une table existante et définir une nouvelle valeur pour une cellule du tableau.
await PowerPoint.run(async (context) => {
// Load shapes.
const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
shapes.load("items");
await context.sync();
// Find the first shape of type table.
const shape = shapes.items.find((shape) => shape.type === PowerPoint.ShapeType.table)
const table = shape.getTable();
table.load();
await context.sync();
// Set the value of the specified table cell.
const cell = table.getCellOrNullObject(1, 1);
cell.text = "A new value";
});
Vous pouvez également obtenir les propriétés en lecture seule suivantes à partir de la table.
- rowCount
- columnCount
L’exemple suivant montre comment obtenir les propriétés de la table et les enregistrer dans la console. L’exemple montre également comment obtenir les zones fusionnées dans la table.
await PowerPoint.run(async (context) => {
// Load shapes.
const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
shapes.load("items");
await context.sync();
// Find the first shape of type table.
const shape = shapes.items.find((shape) => shape.type === PowerPoint.ShapeType.table)
const table = shape.getTable();
// Load row and column counts.
table.load("rowCount, columnCount");
// Load the merged areas.
const mergedAreas = table.getMergedAreas();
mergedAreas.load("items");
await context.sync();
// Log the table properties.
console.log(mergedAreas);
console.log(table.rowCount);
console.log(table.columnCount);
});
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.