为你的 PPT 插入弹幕效果

大的活动现场一般离不开 PPT 演示，可是如何有效和现场互动呢？这时候弹幕必不可少，静态的 PPT 就略显乏力。有没有一种好的方案可以二者兼得呢？

如何才能使 PPT 具有交互性，这是一个值得思考的问题！

可能很多童鞋想到了，如果使用「网页 PPT」，岂不是完美解决了这个问题。本节我们就来提供一种思路，用「PPT + 发射器 + Socket」实现「极简弹幕方案」。

关于「网页 PPT」，可以查看我之前的文章「酷炫的 HTML5 网页 PPT」一探究竟。

一、效果演示

我们先通过一个简单的视频展示一下效果：

二、方案概括

看完上面的演示，是不是迫不及待想知道答案，下面我们来逐步拆分。

先来看看代码结构

.
├── README.md
├── mobile
│   ├── README.md
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   └── yarn.lock
├── package.json
├── ppt
│   ├── css
│   ├── extras
│   ├── images
│   ├── index.html
│   ├── js
│   └── temp
├── server
│   ├── app.js
│   ├── data
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
└── yarn.lock

我们主要关注以下三个目录：

1.ppt使用 impressjs 构建的项目，PPT 演讲「主屏」，主要演示内容区域，同时接收「服务端」推送弹幕信息。

2.mobile移动端，下文称作「发射器」，主要用作现场用户互动向主屏发送弹幕消息。通过 Create React App 生成，技术栈是：React + Antd。

3.server服务端，主要接受用户弹幕，同时广报到主屏，使用 Socket 实现。

启动方式：

1.进入 server 目录，启动服务：

node app.js

此时会启动一个本机 IP 地址的服务。

2.进入 ppt 目录，使用 http-server 启动站点：

http-server

注意：接口地址需要替换成本机 IP 地址。

3.进入 mobile 目录，启动发射器：

yarn start

注意：请求接口需要使用本机 IP 地址。

Demo 比较简单，主要展示主流程，如果细节过程有问题，欢迎一起探讨。

三、主屏细节（核心代码）

主屏是主要演示版面，我们需要像下面这样作出 PPT，这里我们做了三个页面：

<div id="impress" class="jartto" data-transition-duration="1000">

    <div id="cover" class="step slide title" data-x="1000" data-y="1000">
        <img src="temp/img/qrcode.png" />
    </div>

    <div id="award" class="step slide" data-x="2000" data-y="3000">
        <h1>请开始你的表演～</h1>
    </div>

    <div id="change" class="step slide" data-x="2000" data-y="3000" data-scale="5">
        <h1>切换 PPT</h1>
    </div>

    <div id="thank" class="step slide"  data-rel-x="0" data-rel-y="3000" data-rotate="90" data-scale="2">
        <img src="images/thanks.png" />
    </div>

</div>

每个 div 就是一页 ppt，里面可以随意排版，data-x 控制位置，data-scale 控制缩放，data-rotate 控制旋转。

更多 API 文档，请参考如下文档：

1.酷炫的 HTML5 网页 PPT

2.文档地址

四、实现弹幕

为了更好的理解弹幕，我们来实现一个简版：

1.定义弹幕结构

<div class="jartto_demo">我是弹幕</div>

2.定义移动动画

@keyframes barrager{
   from{
     left:100%;
     transform:translateX(0);
     transform:translate3d(0, 0, 0);
   }
   to{
     left:0;
     transform:translate3d(-100%, 0, 0);
   }
}

注意，使用 translate3d 可以开启 GPU 硬件加速，会比 translateX 更流畅一些。

关于硬件加速，可以关注我之前写的一篇文章：详谈层合成（composite）

3.使用动画

1
2
3

let window_height=$(window).height() - 150;
bottom=Math.floor(Math.random() * window_height + 40);
code=code.replace("   bottom:{bottom}, //距离底部高度,单位px,默认随机 \n", '');

OK，我们通过三步实现了一个简单的弹幕动画。那么问题来了，弹幕都是随机位置，随机速度，随机颜色出现在屏幕上的，这个该如何实现呢？

4.随机弹幕出现位置

1
2

let color=`#${Math.floor(Math.random() * (2 << 23)).toString(16)}`; 
console.log(color); // #6e8360

5.随机弹幕颜色

let color=`#${Math.floor(Math.random() * (2 << 23)).toString(16)}`; 
console.log(color); // #6e8360

好了，大功告成，我们顺手加上 Socket 事件监听。

6.事件监听为了拿到用户发送过来的弹幕，我们需要做一个事件监听（接收服务端数据）：

首先，引入 socket.io.js 文件：

<script type="text/javascript" src="http://{jartto.ip}/socket.io/socket.io.js"></script>

js 中添加如下代码：

<div className="app-box">
    <div className="form-box">
        <Form.Item {...formItemLayout} label="">
        {getFieldDecorator('msg', {
            rules: [
            {
                required: true,
                message: '请输入内容',
            },
            ],
        })(<Input size="large" placeholder="发送消息，嗨起来～" />)}
        </Form.Item>
        <Form.Item {...formTailLayout} >
        <Button className="btns"  shape="round" icon="close" size="large" onClick={this.cancle}>取消</Button>
        <Button   type="primary" shape="round" icon="check" size="large" onClick={this.check}>发送</Button>
        </Form.Item>
    </div>
</div>

当我们监听到 server-push 事件的时候，run 函数就会初始化弹幕方法，随机生成一条弹幕，在屏幕滑过。

五、发射器细节（核心代码）

发射器就非常简单了，我们使用 Create React App 初始化项目，在 src/app.js 中写入一个表单(这里以 React 为例，Vue 也是大同小异）：

<div className="app-box">
    <div className="form-box">
        <Form.Item {...formItemLayout} label="">
        {getFieldDecorator('msg', {
            rules: [
            {
                required: true,
                message: '请输入内容',
            },
            ],
        })(<Input size="large" placeholder="发送消息，嗨起来～" />)}
        </Form.Item>
        <Form.Item {...formTailLayout} >
        <Button className="btns"  shape="round" icon="close" size="large" onClick={this.cancle}>取消</Button>
        <Button   type="primary" shape="round" icon="check" size="large" onClick={this.check}>发送</Button>
        </Form.Item>
    </div>
</div>

用户在输入框输入消息，向我们的服务器发送请求，很简单，就不赘述了。效果图可以参考下面：

请注意，此处为了演示效果，我将三端同框了。

六、服务端细节（核心代码）

服务端比较简单，使用 Express 初始化一个 Node 项目，向 app.js 写入如下内容：1.启动 Socket 服务：

const express=require('express'),
  bodyParser=require('body-parser'),
  socket=require('socket.io'),
  fs=require('fs'); 

const app=express();
const PORT=4000;
const io=socket(app.listen(PORT, ()=> console.log(`start on port ${PORT}`)));

2.监听 Socket 连接，接收用户发送数据，将数据写入本地 JSON 文件，并广播到 server-push 事件：

io.on('connection', sockets=> {
  console.log('连接成功！');
  app.post('/api/send', (req, res, next)=> {
    // console.log(req.body);
    let info=JSON.stringify(req.body.msg);

    fs.writeFile('./data/jartto.json', `${info},\n`,
    {flag:'a',encoding:'utf-8',mode:'0666'},function(err){
      if(err) {
        console.log('文件写入失败');
        res.status(500).send('Error');
      } else {
        sockets.broadcast.emit('server-push', { message: req.body.msg });
        res.status(200).send('Done');
      }  
     }) 

  })
  
  sockets.on('disconnect', ()=> {
    console.log('User Disconnected');
  })
});

3.当然，我们也可以存入数据库做持久化，以下演示存入 MySQL 核心代码：

io.on('connection', sockets=> {
  console.log('连接成功！');
  app.post('/api/send', (req, res, next)=> {
    let {ua, msg}=req.body.msg;
    req.getConnection(function(err, cnt) {

      let query=cnt.add('INSERT INTO (ua, msg)', {ua, msg}, function(err, rows) {
        if (err) {
          console.log("Error inserting : %s ",err );
          return next(err);
        }

        sockets.broadcast.emit('server-push', { message: req.body.msg });
        res.status(200).send('Done');
      })
    })

  })

  sockets.on('disconnect', ()=> {
    console.log('User Disconnected');
  })
});

4.启动服务

node app.js

我们的服务端就启动起来了，访问地址是你的主机 IP 和 4000 端口。

七、总结

本文我们从零到一搭建了一个完整的弹幕方案，涉及到三部分：主屏，发射器和服务端，旨在为小伙伴们提供一套极简的设计思路。通过 Demo 我们可以简单的串联一个全栈项目，做更多有趣的事情。

八、热门原创推荐

酷炫的 HTML5 网页 PPT

成为优秀技术型领导的 16 条黄金法则

四款酷炫「数字滚动」插件

这是时代的魅力，既创造奇迹，也毁灭奇迹！

多经常用到PPT幻灯片的朋友时常都希望能够将网络上的一些视频可以插入到自己的PPT模版中，但是都不知道该如何实现。上次详细讲解了在PPT中加入视频的方法，本次我们再来讲解在PowerPoint2010中实现加入网络视频的方法。

Powerpoint2010插入土豆网在线视频方法：

①打开Powerpoint2010，选择“插入”选项卡中“媒体”选项组中的“视频”-->“来自网站的视频”；

②在弹出的“从网站插入视频”对话框中输入网络视频的地址，然后单击“插入”按钮；

③在幻灯版编辑页面上出现一个黑色视频框，通过8个控点用鼠标来调整视频合适的大小；

④选择“视频工具”-->“播放”-->“播放”进行测试，看看能否链接到网站视频；

好了，到这里我们就已经将土豆网的在线视频的插入到PPT中啦！

注：如何找到网络视频的地址？

大部分视频网站都提供了视频的地址。我们可以找到一个视频，在其下有一个“贴到博客或 BBS”的按钮。单击此按钮，在展开的窗口中选择“HTML 代码”复制，即可插入到PowerPoint中了。

于实现文档在线预览的做法，之前文章提到了的两种实现方式：

1、通过将文档转成图片：详见《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》；

2、将文档转成html：详见《文档在线预览（二）word、pdf文件转html以实现文档在线预览》；

其实除了这两种实现方式之外之外，还有一种常见的做法就是在前端在通过相关的在线预览组件来实现预览

实现方案

在网上的找了一圈实现方案，发现还挺多开源组件可以实现，整理了一下这些开源组件放在了下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。

文档格式	相关的开源组件
word(docx)	docx-preview、mammoth
pdf	pdf.js、pdfobject.js、vue-pdf
excel	sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables
powerpoint（pptx）	pptxjs

一、docx文件实现前端预览

1、docx-preview

是一个纯前端的JavaScript库，它的优点是可以后端就实现对 .docx 的文件进行在线预览，但是缺点是 不支持.doc(划重点)。

github地址：https://github.com/VolodymyrBaydalka/docxjs

demo示例

安装：

npm install docx-preview -S

使用效果：

2、Mammoth

??Mammoth 原理是将 .docx 文档并将其转换为 HTML。注意Mammoth 转换过程中复杂样式被忽，居中、首行缩进等，此外同样也只能转换.docx文档。

github地址：https://github.com/mwilliamson/mammoth.js

安装：

npm install mammoth

二、PDF文件实现前端预览

1、pdf.js

pdf.js是一款非常优秀的pdf解析工具，其实火狐浏览器内核自带pdf预览解析器就是pdf.js这个解析器，我们用火狐浏览器打开pdf文件并按F12打开控制台可以看到源码内容。

官网地址：http://mozilla.github.io/pdf.js

github地址：https://github.com/mozilla/pdf.js

demo示例

使用效果：

2、pdfobject.js

PDFObject.js - 将PDF嵌入到一个div内，而不是占据整个页面，要求浏览器支持显示PDF（主流浏览器都支持），如果浏览器不支持，也可通过配置PDF.js来实现

官网地址: https://pdfobject.com/

github地址：https://github.com/pipwerks/PDFObject

实现效果：

3、vue-pdf

Vue-pdf是通过Vue下基础基于 pdf.js 组件实现PDF文件的展示，操作和生成的组件。

github地址：https://github.com/FranckFreiburger/vue-pdf

demo示例

安装：

npm install --save vue-pdf

实现效果：

4、iframe / object/ embed

iframe / object / embed 使用方法和效果都同理，即将 pdf 作为插件内嵌在这三个HTML标签内，以下用 iframe 为例，效果就如同直接用链接打开 pdf 文件是一样的，相当于一个新的页面内嵌在当前页面中。

<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>

实现效果：

三、Excel文件实现前端预览

1、sheetjs js-xlsx

js-xlsx是sheetJS出品的读取和导出各种ecxel的工具库，功能十分强大。

xlsx官方文档：https://www.npmjs.com/package/xlsx

github仓库： https://github.com/SheetJS/sheetjs

安装：

npm install xlsx

js-xlsx可以用二进制流方式读取得到整份excel表格对象

let workbook=XLSX.read(data, { type: "array" });   //表格对象
let sheetNames=workbook.SheetNames;  //获取到所有表格
let worksheet=workbook.Sheets[sheetNames[0]];  //取第一张表

获取表格数据后再调用js-xlsx提供的方法，直接将表格数据转换为html代码，再将html代码渲染到指定容器就完成了

let html=XLSX.utils.sheet_to_html(worksheet);

实现效果：

2、canvas-datagrid

? 基于 canvas 来渲染表格，支持表格过滤、数据编辑、自定义操作菜单、大数据场景优化、主题样式修改

github地址：https://github.com/TonyGermaneri/canvas-datagrid

demo示例

安装：

npm install canvas-datagrid

3、 handsontable

handsontable基于 DOM 元素来渲染表格，功能强大，canvas-datagrid` 支持的功能它都支持，并且主题样式扩展更方便

官网地址：https://handsontable.com/docs/7.1.0/tutorial-custom-build.html

github地址：https://github.com/handsontable/handsontable

文档地址：https://handsontable.com/docs/javascript-data-grid

安装：

npm install handsontable @handsontable/vue

Demo示例

实现效果：

4、DataTables

基于Jquery 表格插件DataTables的一个表格插件，还在用Jquery 可以以考虑这个

官网地址：https://www.datatables.net

安装：

官网下载地址，在你的项目中使用 DataTables，只需要引入三个个文件即可，jQuery库，一个DataTables的核心js文件和一个DataTables的css文件。有的时候还需要DataTables样式的一些资源。

<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>

使用方式：

$('#example').DataTable( {
    data: data
} );

四、pptx文件实现前端预览

### 1、PPTXJS PPTXJS是jquery的一个插件，她的主要功能是实现pptx转html，用于在线进行展示

官网地址：https://pptx.js.org/index.html

github地址：https://github.com/meshesha/PPTXjs

PPTXjs | Demos

使用示例：

<div id="slide-resolte-contaniner" ></div> 
<script> 
  $("#slide-resolte-contaniner").pptxToHtml({ 
    pptxFileUrl: "Sample_demo1.pptx", 
    slidesScale: "50%", 
    slideMode: false, 
    keyBoardShortCut: false 
  }); 
</script>

实现效果：

总结

本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，具体实现可以是：

### 1、前端根据不同文件类型使用对应的在线预览组件进行在线预览。前端通过判断不同文件类型的使用对应的在线预览组件进行在线预览。因为不同类型的在线预览组件不一样在使用时预览界面会存在差异，如果需要做的完善一点最好是把所有用到的组件都统一封装的一个在线预览的UI界面中。

2、后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果

从本文的测试情况来看前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。

以上就是使用js前端实现word、excel、pdf、ppt等文件在线预览的方式的全部内容，感谢大家的阅读！

在线咨询

上一篇：开源智体世界：乔布斯3D纪念馆-第23课-烟花插件的
下一篇：冷门的HTML - tabindex 的作用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

为你的 PPT 插入弹幕效果

一、效果演示

二、方案概括

三、主屏细节（核心代码）

四、实现弹幕

五、发射器细节（核心代码）

六、服务端细节（核心代码）

七、总结

八、热门原创推荐

实现方案

一、docx文件实现前端预览

1、docx-preview

2、Mammoth

二、PDF文件实现前端预览

1、pdf.js

2、pdfobject.js

3、vue-pdf

4、iframe / object/ embed

三、Excel文件实现前端预览

1、sheetjs js-xlsx

2、canvas-datagrid

3、 handsontable

4、DataTables

四、pptx文件实现前端预览

总结

2、后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果

您的项目需求