Convertir presentaciones a HTML5 en .NET

De qué trata esta página

Exportar presentaciones PowerPoint y OpenDocument a HTML5 responsivo con Aspose.Slides para .NET. Conservar el formato, las animaciones y la interactividad.

Visión general

Este artículo explica cómo convertir presentaciones de PowerPoint a HTML5 usando Aspose.Slides para .NET. Cubre la exportación básica, el control de animaciones de formas y transiciones de diapositivas, y la disposición de comentarios. También compara la salida HTML5 con la salida basada en SVG de la exportación HTML estándar.

Exportar PowerPoint a HTML5

El siguiente ejemplo carga una presentación desde el directorio de trabajo y la guarda en formato HTML5. Utiliza la configuración de exportación predeterminada; el próximo ejemplo muestra cómo controlar la reproducción de animaciones de forma explícita. Reemplace la ruta de entrada con la ruta a su presentación.

using Aspose.Slides;
using Aspose.Slides.Export;

using var presentation = new Presentation("pres.pptx");
presentation.Save("pres.html", SaveFormat.Html5);

Note

Además del documento HTML, la exportación escribe archivos CSS y JavaScript de soporte para el estilo de diapositivas, animaciones, efectos y navegación. Mantenga estos archivos con el documento HTML al mover o publicar la salida. La página generada también carga jQuery y Anime.js desde CDNs públicos; sin ellos, la navegación de diapositivas y las animaciones no se ejecutan.

Para exportar sin reproducir animaciones de formas ni transiciones de diapositivas, establezca AnimateShapes y AnimateTransitions a false en Html5Options. Estas configuraciones son independientes, por lo que puede habilitar una mientras deshabilita la otra. El ejemplo exporta la presentación con ambos tipos de animación desactivados en la página generada.

using Aspose.Slides;
using Aspose.Slides.Export;

var html5Options = new Html5Options
{
    AnimateShapes = false,
    AnimateTransitions = false
};

using var presentation = new Presentation("pres.pptx");
presentation.Save("pres5.html", SaveFormat.Html5, html5Options);

Exportar PowerPoint a HTML

La exportación HTML estándar utiliza un enfoque de renderizado diferente: el contenido de la diapositiva se representa mediante SVG dentro de una página HTML. El siguiente ejemplo convierte una presentación a un documento HTML usando este enfoque de renderizado.

using Aspose.Slides;
using Aspose.Slides.Export;

using var presentation = new Presentation("pres.pptx");
presentation.Save("pres.html", SaveFormat.Html);

El marcado simplificado a continuación ilustra la estructura de la página generada. El elemento SVG contiene el contenido de la diapositiva renderizada; el texto del marcador de posición representa ese contenido y no es la salida literal de la exportación.

<body>
<div class="slide" name="slide" id="slideslideIface1">
     <svg version="1.1">
         <g> THE SLIDE CONTENT GOES HERE </g>
     </svg>
</div>
</body>

Warning

La exportación basada en SVG no expone las formas de PowerPoint como elementos HTML individuales. Use la exportación HTML5 cuando necesite las opciones de animación de forma y transición de diapositiva demostradas en este artículo.

Exportar PowerPoint a vista de diapositivas HTML5

La exportación HTML5 produce una página para ver y navegar por las diapositivas de la presentación en un navegador. Este ejemplo habilita tanto AnimateShapes como AnimateTransitions para que la vista de diapositivas exportada pueda reproducir los efectos de la presentación original.

Utilice una presentación que ya contenga animaciones de forma y transiciones de diapositivas para ver el efecto de estas configuraciones. Habilitarlas no añade nuevos efectos a las diapositivas que no los tengan. Después de la exportación, abra el documento HTML5 generado en un navegador con sus archivos de soporte disponibles.

using Aspose.Slides;
using Aspose.Slides.Export;

var html5Options = new Html5Options
{
    AnimateShapes = true,
    AnimateTransitions = true
};

using var presentation = new Presentation("pres.pptx");
presentation.Save("HTML5-slide-view.html", SaveFormat.Html5, html5Options);

Convertir una presentación a un documento HTML5 con comentarios

Puede incluir los comentarios de diapositiva existentes en la salida HTML5 para que los lectores vean la retroalimentación junto al contenido de la diapositiva. El ejemplo en esta sección asume que la presentación fuente contiene comentarios, como se ilustra a continuación. Exporta esos comentarios; no crea nuevos.

Dos comentarios en la diapositiva de la presentación

Asigne un objeto NotesCommentsLayoutingOptions a la propiedad SlidesLayoutOptions de Html5Options. Establezca CommentsPosition a Right desde la enumeración CommentsPositions para colocar los comentarios a la derecha de cada diapositiva.

El siguiente ejemplo exporta la presentación a HTML5 con este diseño de comentarios. Una presentación sin comentarios no tendrá texto de comentario que mostrar.

using Aspose.Slides;
using Aspose.Slides.Export;

var layoutOptions = new NotesCommentsLayoutingOptions
{
    CommentsPosition = CommentsPositions.Right
};

var html5Options = new Html5Options
{
    SlidesLayoutOptions = layoutOptions
};

using var presentation = new Presentation("sample.pptx");
presentation.Save("output.html", SaveFormat.Html5, html5Options);

La imagen a continuación muestra el documento HTML5 exportado con los comentarios mostrados junto a la diapositiva.

Los comentarios en el documento HTML5 de salida

Excluir hipervínculos JavaScript durante la exportación

Suponga que hyperlinks.pptx contiene texto enlazado con un objetivo javascript:alert('Hello') y un enlace ordinario https://example.com/. Para excluir el hipervínculo JavaScript durante la exportación, establezca SaveOptions.SkipJavaScriptLinks a true. El valor predeterminado es false, por lo que estos enlaces no se filtran a menos que habilite la opción.

El siguiente ejemplo carga la presentación desde el directorio de trabajo y la exporta usando Html5Options:

using Aspose.Slides;
using Aspose.Slides.Export;

var html5Options = new Html5Options { SkipJavaScriptLinks = true };

using var presentation = new Presentation("hyperlinks.pptx");
presentation.Save("filtered-html5.html", SaveFormat.Html5, html5Options);

El archivo exportado omite el hipervínculo JavaScript mientras conserva su texto y el enlace HTTPS ordinario. La presentación fuente permanece sin cambios.

Esta opción filtra los hipervínculos JavaScript; no elimina todos los scripts ni otro contenido activo, ni garantiza el cumplimiento de CSP. Por ejemplo, la salida HTML5 sigue incluyendo scripts para la navegación de diapositivas y animaciones.

Preguntas frecuentes

¿Puedo controlar si se reproducen las animaciones de objetos y las transiciones de diapositivas en HTML5?

Sí, la exportación HTML5 ofrece opciones independientes para habilitar o deshabilitar las shape animations y las slide transitions.

¿Se admiten los comentarios y dónde pueden situarse respecto a la diapositiva?

Sí, los comentarios existentes pueden incluirse en la salida HTML5 y posicionarse (por ejemplo, a la derecha de la diapositiva) mediante la layout settings para notas y comentarios.

¿Puedo omitir los enlaces que invocan JavaScript por razones de seguridad o CSP?

Sí, la configuración SkipJavaScriptLinks le permite omitir los hipervínculos con llamadas JavaScript durante el guardado. El valor predeterminado es false. Consulte Exclude JavaScript Hyperlinks During Export para un ejemplo sencillo de exportación a HTML, HTML5 y PDF y el alcance del filtro. Esta configuración no elimina el JavaScript utilizado por el visor HTML5 para la navegación y las animaciones.

Exportar presentaciones a XAML en .NET