Partager via

Insérer des diapositives dans une présentation PowerPoint

  • Article

Un complément PowerPoint peut insérer des diapositives d’une présentation dans la présentation actuelle à l’aide de la bibliothèque JavaScript propre à l’application de PowerPoint. Vous pouvez contrôler si les diapositives insérées conservent la mise en forme de la présentation source ou la mise en forme de la présentation cible.

Les API d’insertion de diapositive sont principalement utilisées dans les scénarios de modèle de présentation : il existe un petit nombre de présentations connues qui servent de pools de diapositives qui peuvent être insérées par le complément. Dans un tel scénario, vous ou le client devez créer et gérer une source de données qui met en corrélation le critère de sélection (par exemple, les titres de diapositives ou les images) avec les ID de diapositive. Les API peuvent également être utilisées dans les scénarios où l’utilisateur peut insérer des diapositives à partir de n’importe quelle présentation arbitraire, mais dans ce scénario, l’utilisateur est effectivement limité à l’insertion de toutes les diapositives de la présentation source. Pour plus d’informations à ce sujet, consultez Sélection des diapositives à insérer .

Il existe deux étapes pour insérer des diapositives d’une présentation dans une autre.

  1. Convertissez le fichier de présentation source (.pptx) en chaîne au format base64.
  2. Utilisez la insertSlidesFromBase64 méthode pour insérer une ou plusieurs diapositives du fichier base64 dans la présentation actuelle.

Convertir la présentation source en base64

Il existe de nombreuses façons de convertir un fichier en base64. Le langage de programmation et la bibliothèque que vous utilisez, et s’il faut convertir côté serveur de votre complément ou côté client est déterminé par votre scénario. Le plus souvent, vous effectuez la conversion en JavaScript côté client à l’aide d’un objet FileReader . L’exemple suivant illustre cette pratique.

  1. Commencez par obtenir une référence au fichier PowerPoint source. Dans cet exemple, nous allons utiliser un <input> contrôle de type file pour inviter l’utilisateur à choisir un fichier. Ajoutez le balisage suivant à la page du complément.

    <section>
    <p>Select a PowerPoint presentation from which to insert slides</p>
    <form>
        <input type="file" id="file" />
    </form>
</section>

    Ce balisage ajoute l’interface utilisateur dans la capture d’écran suivante à la page.

    Contrôle d’entrée de type de fichier HTML précédé d’une phrase d’instruction indiquant « Sélectionner une présentation PowerPoint à partir de laquelle insérer des diapositives ». Le contrôle se compose d’un bouton intitulé « Choisir un fichier » suivi de la phrase « Aucun fichier choisi ».

    Remarque

    Il existe de nombreuses autres façons d’obtenir un fichier PowerPoint. Par exemple, si le fichier est stocké sur OneDrive ou SharePoint, vous pouvez utiliser Microsoft Graph pour le télécharger. Pour plus d’informations, consultez Utilisation de fichiers dans Microsoft Graph et Accès aux fichiers avec Microsoft Graph.

  2. Ajoutez le code suivant au code JavaScript du complément pour affecter une fonction à l’événement du change contrôle d’entrée. (Vous créez la storeFileAsBase64 fonction à l’étape suivante.)

    $("#file").on("change", storeFileAsBase64);

  3. Ajoutez le code suivant. Notez ce qui suit à propos de ce code.

    • La reader.readAsDataURL méthode convertit le fichier en base64 et le stocke dans la reader.result propriété . Une fois la méthode terminée, elle déclenche le gestionnaire d’événements onload .
    • Le onload gestionnaire d’événements supprime les métadonnées du fichier encodé et stocke la chaîne encodée dans une variable globale.
    • La chaîne encodée en base64 est stockée globalement, car elle sera lue par une autre fonction que vous créerez à une étape ultérieure.
    let chosenFileBase64;

async function storeFileAsBase64() {
    const reader = new FileReader();

    reader.onload = async (event) => {
        const startIndex = reader.result.toString().indexOf("base64,");
        const copyBase64 = reader.result.toString().substr(startIndex + 7);

        chosenFileBase64 = copyBase64;
    };

    const myFile = document.getElementById("file") as HTMLInputElement;
    reader.readAsDataURL(myFile.files[0]);
}

Insérer des diapositives avec insertSlidesFromBase64

Votre complément insère les diapositives d’une autre présentation PowerPoint dans la présentation actuelle avec la méthode Presentation.insertSlidesFromBase64 . Voici un exemple simple dans lequel toutes les diapositives de la présentation source sont insérées au début de la présentation actuelle et les diapositives insérées conservent la mise en forme du fichier source. Notez que chosenFileBase64 est une variable globale qui contient une version codée en base64 d’un fichier de présentation PowerPoint.

async function insertAllSlides() {
  await PowerPoint.run(async function(context) {
    context.presentation.insertSlidesFromBase64(chosenFileBase64);
    await context.sync();
  });
}

Vous pouvez contrôler certains aspects du résultat de l’insertion, notamment l’emplacement où les diapositives sont insérées et si elles obtiennent la mise en forme source ou cible , en passant un objet InsertSlideOptions comme deuxième paramètre à insertSlidesFromBase64. Voici un exemple. Tenez compte du code suivant :

  • Il existe deux valeurs possibles pour la formatting propriété : « UseDestinationTheme » et « KeepSourceFormatting ». Si vous le souhaitez, vous pouvez utiliser l’énumération InsertSlideFormatting (par exemple, PowerPoint.InsertSlideFormatting.useDestinationTheme).
  • La fonction insère les diapositives de la présentation source immédiatement après la diapositive spécifiée par la targetSlideId propriété . La valeur de cette propriété est une chaîne de l’une des trois formes possibles : nnn#, #mmmmmmmmmmm ou nnn#mmmmmmmmmmm, où nnn est l’ID de la diapositive (généralement 3 chiffres) et mmmmmmmmmmm est l’ID de création de la diapositive (généralement 9 chiffres). En voici quelques exemples : 267#763315295, 267#et #763315295.
async function insertSlidesDestinationFormatting() {
  await PowerPoint.run(async function(context) {
    context.presentation
    .insertSlidesFromBase64(chosenFileBase64,
                            {
                                formatting: "UseDestinationTheme",
                                targetSlideId: "267#"
                            }
                          );
    await context.sync();
  });
}

Bien sûr, vous ne connaissez généralement pas au moment du codage l’ID ou l’ID de création de la diapositive cible. Plus généralement, un complément demande aux utilisateurs de sélectionner la diapositive cible. Les étapes suivantes montrent comment obtenir l’ID nnn# de la diapositive actuellement sélectionnée et l’utiliser comme diapositive cible.

  1. Créez une fonction qui obtient l’ID de la diapositive actuellement sélectionnée à l’aide de la méthode Office.context.document.getSelectedDataAsync des API JavaScript courantes. Voici un exemple. Notez que l’appel à getSelectedDataAsync est incorporé dans une fonction de retour de promesse. Pour plus d’informations sur la raison et la façon de procéder, consultez Encapsuler Common-APIs dans les fonctions de retour de promesses.

    function getSelectedSlideID() {
  return new OfficeExtension.Promise<string>(function (resolve, reject) {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, function (asyncResult) {
      try {
        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          reject(console.error(asyncResult.error.message));
        } else {
          resolve(asyncResult.value.slides[0].id);
        }
      }
      catch (error) {
        reject(console.log(error));
      }
    });
  })
}

  2. Appelez votre nouvelle fonction à l’intérieur de PowerPoint.run() de la fonction main et passez l’ID qu’elle retourne (concaténé avec le symbole « # ») comme valeur de la targetSlideId propriété du InsertSlideOptions paramètre. Voici un exemple.

    async function insertAfterSelectedSlide() {
    await PowerPoint.run(async function(context) {

        const selectedSlideID = await getSelectedSlideID();

        context.presentation.insertSlidesFromBase64(chosenFileBase64, {
            formatting: "UseDestinationTheme",
            targetSlideId: selectedSlideID + "#"
        });

        await context.sync();
    });
}

Sélection des diapositives à insérer

Vous pouvez également utiliser le paramètre InsertSlideOptions pour contrôler les diapositives de la présentation source qui sont insérées. Pour ce faire, affectez un tableau des ID de diapositive de la présentation source à la sourceSlideIds propriété . Voici un exemple qui insère quatre diapositives. Notez que chaque chaîne du tableau doit suivre l’un ou l’autre des modèles utilisés pour la targetSlideId propriété .

async function insertAfterSelectedSlide() {
    await PowerPoint.run(async function(context) {
        const selectedSlideID = await getSelectedSlideID();
        context.presentation.insertSlidesFromBase64(chosenFileBase64, {
            formatting: "UseDestinationTheme",
            targetSlideId: selectedSlideID + "#",
            sourceSlideIds: ["267#763315295", "256#", "#926310875", "1270#"]
        });

        await context.sync();
    });
}

Remarque

Les diapositives sont insérées dans le même ordre relatif qu’elles apparaissent dans la présentation source, quel que soit l’ordre dans lequel elles apparaissent dans le tableau.

Il n’existe aucun moyen pratique pour les utilisateurs de découvrir l’ID ou l’ID de création d’une diapositive dans la présentation source. Pour cette raison, vous pouvez utiliser la sourceSlideIds propriété uniquement lorsque vous connaissez les ID sources au moment du codage ou que votre complément peut les récupérer au moment de l’exécution à partir d’une source de données. Étant donné qu’on ne peut pas s’attendre à ce que les utilisateurs mémorisent les ID des diapositives, vous avez également besoin d’un moyen pour permettre à l’utilisateur de sélectionner des diapositives, par titre ou par image, puis de mettre en corrélation chaque titre ou image avec l’ID de la diapositive.

Par conséquent, la sourceSlideIds propriété est principalement utilisée dans les scénarios de modèle de présentation : le complément est conçu pour fonctionner avec un ensemble spécifique de présentations qui servent de pools de diapositives pouvant être insérées. Dans un tel scénario, vous ou le client devez créer et gérer une source de données qui met en corrélation un critère de sélection (par exemple, des titres ou des images) avec des ID de diapositive ou des ID de création de diapositives qui ont été construits à partir de l’ensemble de présentations sources possibles.