Complementos de PowerPoint

2025-06-13

Puede utilizar complementos de PowerPoint para crear soluciones atractivas para las presentaciones de los usuarios en plataformas como Windows, iPad, Mac y en un explorador. Puede crear dos tipos de complementos de PowerPoint:

Utilice los complementos del panel de tareas para introducir información de referencia o insertar datos en la presentación mediante un servicio. Por ejemplo, vea el complemento Pexels - Fotos de archivo gratuitas, que podrá usar para agregar fotos profesionales a la presentación. Para crear su propio complemento de panel de tareas, puede empezar por Compilar el primer complemento de panel de tareas de PowerPoint.
Utilice complementos de contenido para agregar contenido dinámico de HTML5 a sus presentaciones. Por ejemplo, vea el complemento Diagramas de LucidChart para PowerPoint , que inserta diagramas interactivos de LucidChart en la baraja. Para crear su propio complemento de contenido, empiece por Compilar el primer complemento de contenido de PowerPoint.

Escenarios de complementos de PowerPoint

En los ejemplos de código de este artículo se muestran algunas tareas básicas que pueden ser útiles al desarrollar complementos para PowerPoint.

Agregue una nueva diapositiva y vaya a ella.

En el ejemplo de código siguiente, la addAndNavigateToNewSlide función llama al método SlideCollection.add para agregar una nueva diapositiva a la presentación. A continuación, la función llama al método Presentation.setSelectedSlides para navegar a la nueva diapositiva.

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();
  });
}

Navegar a una diapositiva particular en la presentación

En el ejemplo de código siguiente, la getSelectedSlides función llama al método Presentation.getSelectedSlides para obtener las diapositivas seleccionadas y, a continuación, registra sus identificadores. A continuación, la función puede actuar sobre la diapositiva actual (o la primera diapositiva de la selección).

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...
  });
}

Navegar entre diapositivas en la presentación

En el ejemplo de código siguiente, la goToSlideByIndex función llama al Presentation.setSelectedSlides método para navegar a la primera diapositiva de la presentación, que tiene el índice 0. El índice máximo de diapositivas al que puede navegar en este ejemplo es 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();
  });
}

Obtenga la dirección URL de la presentación

En el ejemplo de código siguiente, la getFileUrl función llama al método Document.getFileProperties para obtener la dirección URL del archivo de presentación.

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}`);
    }
  });
}

Crear una presentación

El complemento puede crear una nueva presentación, independiente de la instancia de PowerPoint en la que el complemento se está ejecutando actualmente. El espacio de nombres de PowerPoint tiene el método createPresentation para este propósito. Cuando se llama a este método, la nueva presentación se abre inmediatamente y se muestra en una nueva instancia de PowerPoint. El complemento permanece abierto y en ejecución con la presentación anterior.

PowerPoint.createPresentation();

El método createPresentation también puede crear una copia de una presentación existente. El método acepta una representación de cadena codificada en Base64 de un archivo .pptx como parámetro opcional. La presentación resultante será una copia de ese archivo, si el argumento de la cadena es un archivo .pptx válido. La clase FileReader se puede usar para convertir un archivo en la cadena con codificación Base64 necesaria, como se muestra en el ejemplo siguiente.

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]);

Para ver un ejemplo de código completo que incluye una implementación HTML, vea Crear presentación.

Detecte la vista activa de la presentación y maneje el evento ActiveViewChanged

Si va a compilar un complemento de contenido, tendrá que obtener la vista activa de la presentación y controlar el evento Document.ActiveViewChanged como parte de la llamada a Office.onReady .

Nota:

En PowerPoint en la Web, el evento nunca se desencadenará porque el Document.ActiveViewChanged modo presentación con diapositivas se trata como una nueva sesión. En este caso, el complemento debe capturar la vista activa en carga, como se muestra en el siguiente ejemplo de código.

Tenga en cuenta lo siguiente sobre el ejemplo de código:

La getActiveFileView función llama al método Document.getActiveViewAsync para devolver si la vista actual de la presentación es "edit" (cualquiera de las vistas en las que se pueden editar diapositivas, como Normal, El clasificador de diapositivas o Esquema) o "leer" (presentación con diapositivas o vista de lectura), representada por la enumeración ActiveView .
La registerActiveViewChanged función llama al método Document.addHandlerAsync para registrar un controlador para el Document.ActiveViewChanged evento.
Para mostrar información, en este ejemplo se usa la showNotification función , que se incluye en las plantillas de proyecto de complementos de Office de Visual Studio. Si no usa Visual Studio para desarrollar el complemento, deberá reemplazar la showNotification función por su propio código.

// 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.
}