為你的 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，轉成統一的文件格式，再由前端實現預覽效果

您的項目需求