如何在网页中插入PPT的JS代码？-网页设计-锦华智联科技

使用官方推荐的 Microsoft Office API (最专业、功能最全)

这是微软官方提供的方案，通过嵌入一个 iframe 来加载并展示 PPT，它要求你的 PPT 文件必须托管在 OneDrive for Business 或 SharePoint 上。

（图片来源网络，侵删）

优点：

官方支持：最稳定、最可靠的方式。
功能完整：可以提供类似 PPT 在线查看器的所有功能，如幻灯片缩略图、打印、下载等。
响应式：可以很好地适应不同屏幕尺寸。

缺点：

依赖云服务：必须将 PPT 上传到 OneDrive for Business 或 SharePoint,不能直接使用本地文件。
需要配置：对于开发者来说,需要一些简单的配置。

详细步骤：

准备工作：上传 PPT 到 OneDrive

登录你的 OneDrive for Business 账户。
将你的 .pptx 文件上传到 OneDrive 中。
上传后，右键点击文件，选择“共享”。
在共享设置中，确保“任何拥有链接的人”的权限设置为“查看”。
复制这个文件的链接，链接格式通常类似于：https://yourtenant-my.sharepoint.com/personal/your_name_onedrive_com/Documents/Presentation.pptx

获取嵌入代码

（图片来源网络，侵删）

再次右键点击文件，选择“嵌入”。
一个对话框会弹出，里面会提供一段 <iframe> 代码,这就是你需要的核心代码。
你可以在这里调整一些显示选项，比如是否显示工具栏、幻灯片尺寸等。

将代码插入你的网页

直接将复制的 <iframe> 代码粘贴到你的 HTML 文件中即可。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">嵌入PPT示例</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        /* 为 iframe 设置一个容器，方便控制样式 */
        .ppt-container {
            width: 100%;
            max-width: 960px; /* 你可以根据需要调整最大宽度 */
            height: 540px;   /* 高度通常是宽度的 9/16，保持 16:9 比例 */
            margin: 20px auto;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        /* 响应式设计：在小屏幕上调整高度 */
        @media (max-width: 768px) {
            .ppt-container {
                height: 360px;
            }
        }
    </style>
</head>
<body>
    <h1>我的演示文稿</h1>
    <p>以下是嵌入的 PowerPoint 演示文稿：</p>
    <!-- 
      将这里替换成你从 OneDrive "嵌入" 功能中复制的代码
      我这里用一个示例链接代替，你需要替换成你自己的
    -->
    <div class="ppt-container">
        <iframe 
            src="https://www.office.com/embed/embed-a-presentation-for-website?embedid=YOUR_EMBED_ID" 
            frameborder="0" 
            width="100%" 
            height="100%" 
            allowfullscreen="true" 
            mozallowfullscreen="true" 
            webkitallowfullscreen="true">
        </iframe>
    </div>
</body>
</html>

使用第三方 JavaScript 库 (如 PPTXJS，最灵活、本地化)

如果你想在本地服务器上直接展示 PPT 文件，或者需要更深度的自定义，可以使用第三方库。PPTXJS 是一个非常流行的选择。

优点：

本地文件支持：可以直接读取用户本地的 PPT 文件,或服务器上的文件。
高度可定制：你可以完全控制 PPT 的渲染样式和交互逻辑。
无需云服务：不依赖微软的云平台。

缺点：

功能有限：它主要是“渲染”幻灯片，无法提供像官方方案那样的完整编辑或高级查看功能（如备注、批注）。
依赖库：需要引入多个 JavaScript 和 CSS 文件。
兼容性：对非常新的 PPT 动画和复杂元素支持可能不是 100%。

详细步骤：

准备工作：引入库文件

你需要从 CDN 或 GitHub 下载 pptxjs 的相关文件，并在你的 HTML 中引入它们。

创建 HTML 结构

在 HTML 中，你需要一个 <div> 作为 PPT 的容器，以及一个 <input type="file"> 让用户选择文件。

编写 JavaScript 代码

调用库的初始化函数,将文件和容器关联起来。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">使用 PPTXJS 展示 PPT</title>
    <!-- 引入 PPTXJS 的 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/pptxjs@latest/pptxjs.css" />
    <link rel="stylesheet" href="https://unpkg.com/pptxjs@latest/pptxjs.print.css" media="print" />
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
            text-align: center;
        }
        #uploadFile {
            margin: 20px 0;
            padding: 10px;
            font-size: 16px;
        }
        #pptx-container {
            width: 90%;
            max-width: 960px;
            height: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden; /* 防止内容溢出 */
        }
    </style>
</head>
<body>
    <h1>使用 PPTXJS 库展示 PPT</h1>
    <p>请选择一个 .pptx 文件：</p>
    <input type="file" id="uploadFile" accept=".pptx,.ppt" />
    <!-- PPT 将被渲染在这个 div 中 -->
    <div id="pptx-container"></div>
    <!-- 引入 PPTXJS 的 JS -->
    <script src="https://unpkg.com/pptxjs@latest/pptxjs.js"></script>
    <script src="https://unpkg.com/pptxjs@latest/macros.js"></script>
    <script src="https://unpkg.com/pptxjs@latest/pptxjs.slideshow.js"></script>
    <script>
        // 当用户选择文件后触发
        document.getElementById('uploadFile').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                // 清空之前的演示文稿
                document.getElementById('pptx-container').innerHTML = '';
                // 调用 PPTXJS 的 read 函数来读取并渲染文件
                readPPTX(file, 'pptx-container');
            }
        });
        // 你也可以直接从 URL 加载一个在线的 PPT 文件
        // readPPTXFromUrl('path/to/your/presentation.pptx', 'pptx-container');
    </script>
</body>
</html>

将 PPT 转换为图片 (最简单、兼容性最好)

如果你的 PPT 内容不常更新，或者只是想静态展示，可以将每一页幻灯片都导出为图片（如 JPG 或 PNG），然后在网页中使用 <img> 标签或轮播图组件来展示。

优点：

极其简单：只需要基础的 HTML 和 CSS 知识。
性能好：图片加载速度快,兼容所有浏览器。
完全可控：样式和布局完全由你决定。

缺点：

内容不灵活：每次修改 PPT 都需要重新导出图片。
文件体积大：PPT 页数很多,会导致页面加载缓慢。
无法交互：无法实现幻灯片切换动画或点击交互。

详细步骤：

在 PowerPoint 中导出图片

打开你的 PPT 文件。
点击“文件” -> “导出” -> “创建 PDF/XPS 文档”。
在弹出的对话框下方，点击“更改文件类型”。
选择 JPEG 文件格式 (.jpg; .jpeg) 或 *PNG 可移植网络图形格式 (.png)**。
点击“保存”。

在网页中展示图片

你可以手动创建图片列表，也可以使用简单的 JavaScript 实现一个手动切换的幻灯片。

示例代码 (手动切换)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">将PPT转为图片展示</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
            text-align: center;
        }
        .slideshow-container {
            position: relative;
            max-width: 960px;
            margin: auto;
        }
        .slide {
            display: none;
        }
        .slide.active {
            display: block;
        }
        .slide img {
            width: 100%;
            height: auto;
        }
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
    <h1>图片形式的 PPT 展示</h1>
    <div class="slideshow-container">
        <!-- 
          将这里替换成你导出的图片路径
          假设图片命名为 slide1.jpg, slide2.jpg ...
        -->
        <div class="slide active">
            <img src="path/to/your/slide1.jpg" alt="幻灯片 1">
        </div>
        <div class="slide">
            <img src="path/to/your/slide2.jpg" alt="幻灯片 2">
        </div>
        <div class="slide">
            <img src="path/to/your/slide3.jpg" alt="幻灯片 3">
        </div>
        <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
        <a class="next" onclick="changeSlide(1)">&#10095;</a>
    </div>
    <script>
        let slideIndex = 1;
        function changeSlide(n) {
            showSlide(slideIndex += n);
        }
        function showSlide(n) {
            let i;
            let slides = document.getElementsByClassName("slide");
            if (n > slides.length) { slideIndex = 1; }
            if (n < 1) { slideIndex = slides.length; }
            for (i = 0; i < slides.length; i++) {
                slides[i].classList.remove("active");
            }
            slides[slideIndex - 1].classList.add("active");
        }
    </script>
</body>
</html>

总结与选择建议

特性	方案一 (Microsoft API)	方案二 (PPTXJS)	方案三 (转图片)
易用性	中等 (需上传到云)	中等 (需引入库)	简单
功能完整性	高 (官方查看器)	中等 (基本渲染)	低 (静态展示)
灵活性	低 (样式受限)	高 (完全可控)	高 (完全可控)
文件来源	OneDrive / SharePoint	本地 / 服务器	本地 / 服务器
适用场景	企业内网、产品官网展示、需要完整查看功能的场景	需要本地化部署、深度定制的项目、PPT 预览工具	博客文章、静态报告、内容不常更新的展示

如何选择？

如果你的 PPT 已经在 OneDrive/SharePoint 上，且需要最专业、功能最全的展示效果：首选方案一。
如果你需要在自己的服务器上运行，或者希望对 PPT 的展示有完全的控制权：选择方案二。
如果你的 PPT 内容是静态的，更新不频繁，或者你只是想快速、简单地展示几张图片：选择方案三。