在 Java 中将演示文稿转换为 HTML5

本页内容简介

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

概览

本文介绍如何使用 Aspose.Slides for 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 中将 false 传递给 setAnimateShapes 和 setAnimateTransitions。这些设置是独立的，因此可以启用一个而禁用另一个。示例在生成的页面中将两种动画均禁用后导出演示文稿。

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 超链接，请将 true 传递给 SaveOptions.setSkipJavaScriptLinks。默认值为 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。

将演示文稿导出为 Java 中的 XAML