Complementos de PowerPoint

  • Artículo

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 complementos de contenido para agregar contenido dinámico de HTML5 a sus presentaciones. Por ejemplo, consulte el complemento de diagramas LucidChart para PowerPoint, que puede utilizar para insertar un diagrama interactivo de LucidChart en la baraja.

  • 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.

Escenarios de complementos de PowerPoint

Los ejemplos de código del artículo muestran algunas tareas básicas para desarrollar complementos para PowerPoint. Tenga en cuenta lo siguiente:

  • Para mostrar información, estos ejemplos usan la función app.showNotification, que se incluye en las plantillas de proyecto de los complementos de Office de Visual Studio. Si no utiliza Visual Studio para desarrollar su complemento, deberá reemplazar la función showNotification con su propio código.

  • Varios de estos ejemplos también usan un Globals objeto que se declara fuera del ámbito de estas funciones como: var Globals = {activeViewHandler:0, firstSlideId:0};

  • Para usar estos ejemplos, el proyecto de complemento debe hacer referencia a la biblioteca de Office.js versión 1.1 o posterior.

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

Si va a crear un complemento de contenido, tendrá que obtener la vista activa de la presentación y manejar el evento ActiveViewChanged, como parte de su controlador Office.Initialize.

Nota:

En PowerPoint en la Web, el evento Document.ActiveViewChanged no se iniciará nunca, ya que el 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.

En el siguiente 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 o Vista esquema) o "read" (Presentación con diapositivas o Vista de lectura).

  • La registerActiveViewChanged función llama al método addHandlerAsync para registrar un controlador para el evento Document.ActiveViewChanged .

//general Office.initialize function. Fires on load of the add-in.
Office.initialize = function(){

    //Gets whether the current view is edit or read.
    const currentView = getActiveFileView();

    //register for the active view changed handler
    registerActiveViewChanged();

    //render the content based off of the currentView
    //....
}

function getActiveFileView()
{
    Office.context.document.getActiveViewAsync(function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification(asyncResult.value);
        }
    });

}

function registerActiveViewChanged() {
    Globals.activeViewHandler = function (args) {
        app.showNotification(JSON.stringify(args));
    }

    Office.context.document.addHandlerAsync(Office.EventType.ActiveViewChanged, Globals.activeViewHandler,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                app.showNotification("Action failed with error: " + asyncResult.error.message);
            }
            else {
                app.showNotification(asyncResult.status);
            }
        });
}

En el ejemplo de código siguiente, la función getSelectedRange llama al método Document.getSelectedDataAsync para obtener el objeto JSON devuelto por asyncResult.value, que contiene una matriz denominada slides. La matriz slides contiene los identificadores, títulos e índices del rango seleccionado de diapositivas (o de la diapositiva actual, si no se seleccionan varias diapositivas). También guarda el Id. de la primera diapositiva del rango seleccionado a una variable global.

function getSelectedRange() {
    // Get the id, title, and index of the current slide (or selected slides) and store the first slide id */
    Globals.firstSlideId = 0;

    Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            Globals.firstSlideId = asyncResult.value.slides[0].id;
            app.showNotification(JSON.stringify(asyncResult.value));
        }
    });
}

En el ejemplo de código siguiente, la función goToFirstSlide llamada al método Document.goToByIdAsync para ir a la primera diapositiva identificada por la función getSelectedRange mostrada anteriormente.

function goToFirstSlide() {
    Office.context.document.goToByIdAsync(Globals.firstSlideId, Office.GoToType.Slide, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification("Navigation successful");
        }
    });
}

En el siguiente ejemplo de código, la función goToSlideByIndex llama al método Document.goToByIdAsync para navegar hasta la siguiente diapositiva en la presentación.

function goToSlideByIndex() {
    const goToFirst = Office.Index.First;
    const goToLast = Office.Index.Last;
    const goToPrevious = Office.Index.Previous;
    const goToNext = Office.Index.Next;

    Office.context.document.goToByIdAsync(goToNext, Office.GoToType.Index, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification("Navigation successful");
        }
    });
}

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() {
    //Get the URL of the current file.
    Office.context.document.getFilePropertiesAsync(function (asyncResult) {
        const fileUrl = asyncResult.value.url;
        if (fileUrl == "") {
            app.showNotification("The file hasn't been saved yet. Save the file and try again");
        }
        else {
            app.showNotification(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 con codificación base64 de un archivo .pptx como un 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 puede usarse para convertir un archivo en la cadena con codificación base64 necesaria, como se muestra en el ejemplo siguiente.

const myFile = document.getElementById("file");
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]);

Recursos adicionales