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

本页内容简介

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

概述

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

将 PowerPoint 导出为 HTML5

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

const aspose = { slides: require("aspose.slides.via.java") };

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

Note

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

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

const aspose = { slides: require("aspose.slides.via.java") };

const html5Options = new aspose.slides.Html5Options();
html5Options.setAnimateShapes(false);
html5Options.setAnimateTransitions(false);

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

将 PowerPoint 导出为 HTML

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

const aspose = { slides: require("aspose.slides.via.java") };

const presentation = new aspose.slides.Presentation("pres.pptx");
try {
    presentation.save("pres.html", aspose.slides.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 文档，并确保其支持文件可用。

const aspose = { slides: require("aspose.slides.via.java") };

const html5Options = new aspose.slides.Html5Options();
html5Options.setAnimateShapes(true);
html5Options.setAnimateTransitions(true);

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

将演示文稿转换为带有注释的 HTML5 文档

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

演示幻灯片上的两个注释

将一个 NotesCommentsLayoutingOptions 对象传递给 Html5Options 的 setSlidesLayoutOptions 方法。使用 setCommentsPosition 并从 CommentsPositions 枚举中选择 Right，即可将注释放置在每张幻灯片的右侧。

以下示例使用此注释布局将演示文稿导出为 HTML5。没有注释的演示文稿将不会显示注释文字。

const aspose = { slides: require("aspose.slides.via.java") };

const layoutOptions = new aspose.slides.NotesCommentsLayoutingOptions();
layoutOptions.setCommentsPosition(aspose.slides.CommentsPositions.Right);

const html5Options = new aspose.slides.Html5Options();
html5Options.setSlidesLayoutOptions(layoutOptions);

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

下图显示了导出的 HTML5 文档，注释显示在幻灯片旁边。

输出 HTML5 文档中的注释

导出时排除 JavaScript 超链接

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

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

const aspose = { slides: require("aspose.slides.via.java") };

const html5Options = new aspose.slides.Html5Options();
html5Options.setSkipJavaScriptLinks(true);

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

导出的文件会省略 JavaScript 超链接，但保留其文本和普通的 HTTPS 链接。源演示文稿未被修改。

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

常见问题

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

是的，HTML5 导出提供了单独的选项来启用或禁用形状动画和幻灯片切换。

是否支持注释，以及它们可以相对于幻灯片放置在哪里？

是的，现有的注释可以包含在 HTML5 输出中，并通过用于备注和注释的布局设置将其定位（例如，放置在幻灯片的右侧）。

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

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

在 JavaScript 中将演示文稿导出为 XAML