将演示文稿转换为 Android 上的 HTML5

本页内容简介

使用 Aspose.Slides for Android via Java 将 PowerPoint 和 OpenDocument 演示文稿导出为响应式 HTML5。保留格式、动画和交互性。

概述

本文介绍如何使用 Aspose.Slides for Android via Java 将 PowerPoint 演示文稿转换为 HTML5。它涵盖了基本导出、形状动画和幻灯片切换的控制以及评论布局。还比较了 HTML5 输出与标准 HTML 导出的基于 SVG 的输出。

将 PowerPoint 导出为 HTML5

以下示例从工作目录加载演示文稿并将其保存为 HTML5 格式。它使用默认导出设置；下一个示例演示如何显式控制动画播放。请将输入路径替换为您的演示文稿路径。

import com.aspose.slides.*;

Presentation presentation = new Presentation("pres.pptx");
try {
    presentation.save("pres.html", SaveFormat.Html5);
} finally {
    presentation.dispose();
}

Note

除了 HTML 文档外，导出还会生成用于幻灯片样式、动画、效果和导航的 CSS 和 JavaScript 支持文件。移动或发布输出时请将这些文件与 HTML 文档一起保留。生成的页面还会从公共 CDN 加载 jQuery 和 Anime.js；如果没有这些文件，幻灯片导航和动画将无法运行。

若要在导出时不播放形状动画或幻灯片切换，可在 Html5Options 中对 setAnimateShapes 和 setAnimateTransitions 传入 false。这些设置相互独立，可在启用一个的同时禁用另一个。示例在生成的页面中将两种动画均禁用后导出演示文稿。

import com.aspose.slides.*;

Html5Options html5Options = new Html5Options();
html5Options.setAnimateShapes(false);
html5Options.setAnimateTransitions(false);

Presentation presentation = new Presentation("pres.pptx");
try {
    presentation.save("pres5.html", SaveFormat.Html5, html5Options);
} finally {
    presentation.dispose();
}

将 PowerPoint 导出为 HTML

标准的 HTML 导出采用不同的渲染方式：幻灯片内容以 SVG 形式嵌入 HTML 页面中。以下示例使用此渲染方式将演示文稿转换为 HTML 文档。

import com.aspose.slides.*;

Presentation presentation = new Presentation("pres.pptx");
try {
    presentation.save("pres.html", SaveFormat.Html);
} finally {
    presentation.dispose();
}

下面的简化标记展示了生成页面的结构。SVG 元素包含渲染后的幻灯片内容；占位符文本表示该内容，并非实际导出输出。

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

Warning

基于 SVG 的导出不会将 PowerPoint 形状暴露为单独的 HTML 元素。当您需要本文演示的形状动画和幻灯片切换选项时，请使用 HTML5 导出。

将 PowerPoint 导出为 HTML5 幻灯片视图

HTML5 导出生成一个用于在浏览器中查看和导航演示文稿幻灯片的页面。本示例同时启用 setAnimateShapes 和 setAnimateTransitions，以便导出的幻灯片视图能够播放来源演示文稿中的效果。

请使用已包含形状动画和幻灯片切换的演示文稿，以观察这些设置的效果。启用它们不会为没有动画的幻灯片添加新效果。导出后，在浏览器中打开生成的 HTML5 文档，并确保其支持文件可用。

import com.aspose.slides.*;

Html5Options html5Options = new Html5Options();
html5Options.setAnimateShapes(true);
html5Options.setAnimateTransitions(true);

Presentation presentation = new Presentation("pres.pptx");
try {
    presentation.save("HTML5-slide-view.html", SaveFormat.Html5, html5Options);
} finally {
    presentation.dispose();
}

将演示文稿转换为带评论的 HTML5 文档

您可以在 HTML5 输出中包含现有的幻灯片评论，以便读者在幻灯片内容旁看到反馈。本节示例假设源演示文稿包含评论，如下所示。它会导出这些评论，而不会创建新评论。

演示文稿幻灯片上的两个评论

将 NotesCommentsLayoutingOptions 对象传递给 Html5Options 的 setSlidesLayoutOptions 方法。使用 setCommentsPosition 从 CommentsPositions 枚举中选择 Right，将评论放置在每张幻灯片的右侧。

下面的示例使用此评论布局将演示文稿导出为 HTML5。没有评论的演示文稿将不会显示任何评论文本。

import com.aspose.slides.*;

NotesCommentsLayoutingOptions layoutOptions = new NotesCommentsLayoutingOptions();
layoutOptions.setCommentsPosition(CommentsPositions.Right);

Html5Options html5Options = new Html5Options();
html5Options.setSlidesLayoutOptions(layoutOptions);

Presentation presentation = new Presentation("sample.pptx");
try {
    presentation.save("output.html", SaveFormat.Html5, html5Options);
} finally {
    presentation.dispose();
}

输出的 HTML5 文档中的评论

导出时排除 JavaScript 超链接

假设 hyperlinks.pptx 包含指向 javascript:alert('Hello') 的链接文本以及普通的 https://example.com/ 链接。若要在导出时排除 JavaScript 超链接，请对 SaveOptions.setSkipJavaScriptLinks 传入 true。默认值为 false，因此除非启用此选项，否则这些链接不会被过滤。

下面的示例从工作目录加载演示文稿，并使用 Html5Options 导出：

import com.aspose.slides.*;

Html5Options html5Options = new Html5Options();
html5Options.setSkipJavaScriptLinks(true);

Presentation presentation = new Presentation("hyperlinks.pptx");
try {
    presentation.save("filtered-html5.html", SaveFormat.Html5, html5Options);
} finally {
    presentation.dispose();
}

导出的文件会省略 JavaScript 超链接，但保留其文本和普通的 HTTPS 链接。源演示文稿保持不变。

此选项仅过滤 JavaScript 超链接；它不会删除所有脚本或其他活动内容，也不保证符合 CSP。例如，HTML5 输出仍会包含用于幻灯片导航和动画的脚本。

常见问题

我可以控制对象动画和幻灯片切换在 HTML5 中是否播放吗？

可以，HTML5 导出提供了独立的选项来启用或禁用 shape animations 和 slide transitions。

是否支持评论？它们可以相对于幻灯片放置在何处？

是的，现有的评论可以包含在 HTML5 输出中，并可通过 layout settings 为备注和评论进行布局设置（例如，将其放置在幻灯片右侧）。

我可以为了安全或 CSP 原因跳过调用 JavaScript 的链接吗？

可以，setSkipJavaScriptLinks 设置允许在保存时跳过包含 JavaScript 调用的超链接。默认值为 false。请参阅 Exclude JavaScript Hyperlinks During Export 获取 HTML5 导出示例及过滤范围。此设置不会删除 HTML5 查看器用于导航和动画的 JavaScript。

在 Android 上将演示文稿导出为 XAML