Partager via

Compléments PowerPoint

Vous pouvez utiliser des compléments PowerPoint afin de créer des solutions attrayantes pour les présentations de vos utilisateurs sur différentes plateformes, notamment Windows, iPad et Mac, ainsi que dans un navigateur. Vous pouvez créer deux types de commandes de complément PowerPoint:

Scénarios de complément PowerPoint

Les exemples de code de cet article illustrent certaines tâches de base qui peuvent être utiles lors du développement de compléments pour PowerPoint.

Ajouter une nouvelle diapositive, puis y accéder

Dans l’exemple de code suivant, la addAndNavigateToNewSlide fonction appelle la méthode SlideCollection.add pour ajouter une nouvelle diapositive à la présentation. La fonction appelle ensuite la méthode Presentation.setSelectedSlides pour accéder à la nouvelle diapositive.

async function addAndNavigateToNewSlide() {
  // Adds a new slide then navigates to it.
  await PowerPoint.run(async (context) => {
    const slideCountResult = context.presentation.slides.getCount();
    context.presentation.slides.add();
    await context.sync();

    const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
    newSlide.load("id");
    await context.sync();

    console.log(`Added slide - ID: ${newSlide.id}`);

    // Navigate to the new slide.
    context.presentation.setSelectedSlides([newSlide.id]);
    await context.sync();
  });
}

Dans l’exemple de code suivant, la getSelectedSlides fonction appelle la méthode Presentation.getSelectedSlides pour obtenir les diapositives sélectionnées, puis enregistre leurs ID. La fonction peut ensuite agir sur la diapositive active (ou la première diapositive de la sélection).

async function getSelectedSlides() {
  // Gets the ID of the current slide (or selected slides).
  await PowerPoint.run(async (context) => {
    const selectedSlides = context.presentation.getSelectedSlides();
    selectedSlides.load("items/id");
    await context.sync();

    if (selectedSlides.items.length === 0) {
      console.warn("No slides were selected.");
      return;
    }

    console.log("IDs of selected slides:");
    selectedSlides.items.forEach(item => {
      console.log(item.id);
    });

    // Navigate to first selected slide.
    const currentSlide = selectedSlides.items[0];
    console.log(`Navigating to slide with ID ${currentSlide.id} ...`);
    context.presentation.setSelectedSlides([currentSlide.id]);

    // Perform actions on current slide...
  });
}

Dans l’exemple de code suivant, la goToSlideByIndex fonction appelle la Presentation.setSelectedSlides méthode pour accéder à la première diapositive de la présentation, qui a l’index 0. L’index de diapositive maximal auquel vous pouvez accéder dans cet exemple est slideCountResult.value - 1.

async function goToSlideByIndex() {
  await PowerPoint.run(async (context) => {
    // Gets the number of slides in the presentation.
    const slideCountResult = context.presentation.slides.getCount();
    await context.sync();

    if (slideCountResult.value === 0) {
      console.warn("There are no slides.");
      return;
    }

    const slide = context.presentation.slides.getItemAt(0); // First slide
    //const slide = context.presentation.slides.getItemAt(slideCountResult.value - 1); // Last slide
    slide.load("id");
    await context.sync();

    console.log(`Slide ID: ${slide.id}`);

    // Navigate to the slide.
    context.presentation.setSelectedSlides([slide.id]);
    await context.sync();
  });
}

Obtenir l’URL de la présentation

Dans l’exemple de code suivant, la getFileUrl fonction appelle la méthode Document.getFileProperties pour obtenir l’URL du fichier de présentation.

function getFileUrl() {
  // Gets the URL of the current file.
  Office.context.document.getFilePropertiesAsync(function (asyncResult) {
    const fileUrl = asyncResult.value.url;
    if (fileUrl === "") {
      console.warn("The file hasn't been saved yet. Save the file and try again.");
    } else {
      console.log(`File URL: ${fileUrl}`);
    }
  });
}

Créer une présentation

Votre complément peut créer un nouveau classeur, distinct de l’instance de PowerPoint dans laquelle le complément est en cours d’exécution. L’espace de noms PowerPoint a la createPresentation méthode à cet effet. Lorsque cette méthode est appelée, la nouvelle présentation est immédiatement ouverte et affichée dans une nouvelle instance de PowerPoint. Votre complément reste ouvert et en cours d’exécution avec la présentation précédente.

PowerPoint.createPresentation();

La createPresentation méthode peut également créer une copie d’une présentation existante. La méthode accepte une représentation sous forme de chaîne codée en Base64 d’un fichier .pptx en tant que paramètre facultatif. La présentation résultante sera une copie de ce fichier, en supposant que l’argument de chaîne est un fichier .pptx valide. La classe FileReader peut être utilisée pour convertir un fichier en chaîne encodée en Base64 requise, comme illustré dans l’exemple suivant.

const myFile = document.getElementById("file") as HTMLInputElement;
const reader = new FileReader();

reader.onload = function (event) {
    // Strip off the metadata before the Base64-encoded string.
    const startIndex = reader.result.toString().indexOf("base64,");
    const copyBase64 = reader.result.toString().substr(startIndex + 7);

    PowerPoint.createPresentation(copyBase64);
};

// Read in the file as a data URL so we can parse the Base64-encoded string.
reader.readAsDataURL(myFile.files[0]);

Pour afficher un exemple de code complet qui inclut une implémentation HTML, consultez Créer une présentation.

Détecter l’affichage actif de la présentation et gérer l’événement ActiveViewChanged

Si vous créez un complément de contenu, vous devez obtenir l’affichage actif de la présentation et gérer l’événement Document.ActiveViewChanged dans le cadre de votre appel Office.onReady .

Remarque

Dans PowerPoint sur le web, l’événement ne se déclenche jamais, car le Document.ActiveViewChanged mode Diaporama est traité comme une nouvelle session. Dans ce cas, le complément doit extraire la vue active lors du chargement, comme indiqué ci-dessous.

Notez ce qui suit à propos de l’exemple de code :

  • La getActiveFileView fonction appelle la méthode Document.getActiveViewAsync pour indiquer si l’affichage actuel de la présentation est « modifier » (n’importe quel affichage dans lequel vous pouvez modifier des diapositives, comme Normal, Trieuse de diapositives ou Plan) ou « read » (Diaporama ou Mode Lecture), représenté par l’énumération ActiveView .
  • La registerActiveViewChanged fonction appelle la méthode Document.addHandlerAsync pour inscrire un gestionnaire pour l’événement Document.ActiveViewChanged .
  • Pour afficher des informations, cet exemple utilise la showNotification fonction , qui est incluse dans les modèles de projet Compléments Office Visual Studio. Si vous n’utilisez pas Visual Studio pour développer votre complément, vous devez remplacer la showNotification fonction par votre propre code.
// General Office.onReady function. Called after the add-in loads and Office JS is initialized.
Office.onReady(() => {
  // Get whether the current view is edit or read.
  const currentView = getActiveFileView();

  // Register the active view changed handler.
  registerActiveViewChanged();

  // Render the content based off of the current view.
  if (currentView === Office.ActiveView.Read) {
      // Handle read view.
      console.log('Current view is read.');
      // You can add any specific logic for the read view here.
  } else {
      // Handle edit view.
      console.log('Current view is edit.');
      // You can add any specific logic for the edit view here.
  }
});

// Gets the active file view.
function getActiveFileView() {
    console.log('Getting active file view...');
    Office.context.document.getActiveViewAsync(function (result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            console.log('Active view:', result.value);
            return result.value;
        } else {
            console.error('Error getting active view:', result.error.message);
            showNotification('Error:', result.error.message);
            return null;
        }
    });
}

// Registers the ActiveViewChanged event.
function registerActiveViewChanged() {
    console.log('Registering ActiveViewChanged event handler...');
    Office.context.document.addHandlerAsync(
        Office.EventType.ActiveViewChanged,
        activeViewHandler,
        function (result) {
            if (result.status === Office.AsyncResultStatus.Failed) {
                console.error('Failed to register active view changed handler:', result.error.message);
                showNotification('Error:', result.error.message);
            } else {
                console.log('Active view changed handler registered successfully.');
            }
        });
}

// ActiveViewChanged event handler.
function activeViewHandler(eventArgs) {
    console.log('Active view changed:', JSON.stringify(eventArgs));
    showNotification('Active view changed', `The active view has changed to: ${eventArgs.activeView}`);
    // You can add logic here based on the new active view.
}

Voir aussi