Konwertuj prezentacje do HTML5 w .NET

Przegląd

Ten artykuł wyjaśnia, jak konwertować prezentacje PowerPoint do HTML5 przy użyciu Aspose.Slides dla .NET. Omówiono podstawowy eksport, kontrolę animacji kształtów i przejść slajdów oraz układ komentarzy. Porównano także wyjście HTML5 z wyjściem opartym na SVG standardowego eksportu HTML.

Eksport PowerPoint do HTML5

Poniższy przykład ładuje prezentację z katalogu roboczego i zapisuje ją w formacie HTML5. Używa domyślnych ustawień eksportu; kolejny przykład pokazuje, jak kontrolować odtwarzanie animacji w sposób jawny. Zastąp ścieżkę wejściową ścieżką do swojej prezentacji.

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

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

Aby wyeksportować bez odtwarzania animacji kształtów lub przejść slajdów, ustaw AnimateShapes i AnimateTransitions na false w Html5Options. Te ustawienia są niezależne, więc możesz włączyć jedno, a wyłączyć drugie. Przykład eksportuje prezentację z wyłączonymi obiema typami animacji w wygenerowanej stronie.

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

Eksport PowerPoint do HTML

Standardowy eksport HTML używa innego podejścia renderowania: zawartość slajdu jest reprezentowana jako SVG wewnątrz strony HTML. Poniższy przykład konwertuje prezentację do dokumentu HTML przy użyciu tego podejścia renderowania.

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

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

Uproszczony znacznik poniżej ilustruje strukturę wygenerowanej strony. Element SVG zawiera renderowaną zawartość slajdu; tekst zastępczy reprezentuje tę zawartość i nie jest dosłownym wynikiem eksportu.

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

Eksport PowerPoint do widoku slajdów HTML5

Eksport HTML5 tworzy stronę do przeglądania i nawigacji po slajdach prezentacji w przeglądarce. Ten przykład włącza zarówno AnimateShapes i AnimateTransitions, aby wyeksportowany widok slajdów mógł odtwarzać efekty z prezentacji źródłowej.

Użyj prezentacji, która już zawiera animacje kształtów i przejścia slajdów, aby zobaczyć efekt tych ustawień. Włączenie ich nie dodaje nowych efektów do slajdów, które ich nie mają. Po eksporcie otwórz wygenerowany dokument HTML5 w przeglądarce z dostępnymi plikami pomocniczymi.

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

Konwersja prezentacji do dokumentu HTML5 z komentarzami

Możesz uwzględnić istniejące komentarze slajdów w wyjściu HTML5, aby czytelnicy mogli zobaczyć opinie obok zawartości slajdu. Przykład w tej sekcji zakłada, że prezentacja źródłowa zawiera komentarze, jak pokazano poniżej. Eksportuje te komentarze; nie tworzy nowych.

Dwa komentarze na slajdzie prezentacji

Przypisz obiekt NotesCommentsLayoutingOptions do właściwości SlidesLayoutOptions klasy Html5Options. Ustaw CommentsPosition na Right z wyliczenia CommentsPositions, aby umieścić komentarze po prawej stronie każdego slajdu.

Poniższy przykład eksportuje prezentację do HTML5 z takim układem komentarzy. Prezentacja bez komentarzy nie będzie miała tekstu komentarza do wyświetlenia.

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

Komentarze w wyjściowym dokumencie HTML5

Wykluczenie odnośników JavaScript podczas eksportu

Załóżmy, że hyperlinks.pptx zawiera tekst z linkiem o docelowym adresie javascript:alert('Hello') oraz zwykły link https://example.com/. Aby wykluczyć odnośnik JavaScript podczas eksportu, ustaw SaveOptions.SkipJavaScriptLinks na true. Domyślnie jest false, więc te linki nie są filtrowane, chyba że włączysz opcję.

Poniższy przykład ładuje prezentację z katalogu roboczego i eksportuje ją przy użyciu 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);

Wyeksportowany plik pomija odnośnik JavaScript, zachowując jednocześnie jego tekst oraz zwykły link HTTPS. Prezentacja źródłowa pozostaje niezmieniona.

Ta opcja filtruje odnośniki JavaScript; nie usuwa wszystkich skryptów ani innej aktywnej zawartości, ani nie gwarantuje zgodności z CSP. Na przykład wyjście HTML5 nadal zawiera skrypty do nawigacji po slajdach i animacji.

FAQ

Czy mogę kontrolować, czy animacje obiektów i przejścia slajdów będą odtwarzane w HTML5?

Tak, eksport HTML5 udostępnia oddzielne opcje włączania lub wyłączania animacji kształtów i przejść slajdów.

Czy komentarze są obsługiwane i gdzie można je umieścić względem slajdu?

Tak, istniejące komentarze mogą być uwzględnione w wyjściu HTML5 i rozmieszczone (na przykład po prawej stronie slajdu) za pomocą ustawień układu dla notatek i komentarzy.

Czy mogę pominąć odnośniki wywołujące JavaScript ze względów bezpieczeństwa lub CSP?

Tak, ustawienie SkipJavaScriptLinks umożliwia pomijanie odnośników z wywołaniami JavaScript podczas zapisywania. Domyślnie jest false. Zobacz Wykluczenie odnośników JavaScript podczas eksportu po prosty przykład eksportu HTML, HTML5 i PDF oraz zakres filtru. To ustawienie nie usuwa JavaScriptu używanego przez przeglądarkę HTML5 do nawigacji i animacji.