整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
大的活動(dòng)現(xiàn)場(chǎng)一般離不開 PPT 演示，可是如何有效和現(xiàn)場(chǎng)互動(dòng)呢？這時(shí)候彈幕必不可少，靜態(tài)的 PPT 就略顯乏力。有沒(méi)有一種好的方案可以二者兼得呢？
如何才能使 PPT 具有交互性，這是一個(gè)值得思考的問(wèn)題！
可能很多童鞋想到了，如果使用「網(wǎng)頁(yè) PPT」 ，豈不是完美解決了這個(gè)問(wèn)題。本節(jié)我們就來(lái)提供一種思路，用「PPT + 發(fā)射器 + Socket」 實(shí)現(xiàn)「極簡(jiǎn)彈幕方案」。
關(guān)于「網(wǎng)頁(yè) PPT」，可以查看我之前的文章「酷炫的 HTML5 網(wǎng)頁(yè) PPT」一探究竟。
我們先通過(guò)一個(gè)簡(jiǎn)單的視頻展示一下效果：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
看完上面的演示，是不是迫不及待想知道答案，下面我們來(lái)逐步拆分。
先來(lái)看看代碼結(jié)構(gòu)
.
├── 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我們主要關(guān)注以下三個(gè)目錄：
1.ppt使用 impressjs 構(gòu)建的項(xiàng)目，PPT 演講「主屏」，主要演示內(nèi)容區(qū)域，同時(shí)接收「服務(wù)端」推送彈幕信息。
2.mobile移動(dòng)端，下文稱作「發(fā)射器」，主要用作現(xiàn)場(chǎng)用戶互動(dòng)向主屏發(fā)送彈幕消息。通過(guò) Create React App 生成，技術(shù)棧是：React + Antd。
3.server服務(wù)端，主要接受用戶彈幕，同時(shí)廣報(bào)到主屏，使用 Socket 實(shí)現(xiàn)。
啟動(dòng)方式：
1.進(jìn)入 server 目錄，啟動(dòng)服務(wù)：
node app.js此時(shí)會(huì)啟動(dòng)一個(gè)本機(jī) IP 地址的服務(wù)。
2.進(jìn)入 ppt 目錄，使用 http-server 啟動(dòng)站點(diǎn)：
http-server注意：接口地址需要替換成本機(jī) IP 地址。
3.進(jìn)入 mobile 目錄，啟動(dòng)發(fā)射器：
yarn start注意：請(qǐng)求接口需要使用本機(jī) IP 地址。
Demo 比較簡(jiǎn)單，主要展示主流程，如果細(xì)節(jié)過(guò)程有問(wèn)題，歡迎一起探討。
主屏是主要演示版面，我們需要像下面這樣作出 PPT，這里我們做了三個(gè)頁(yè)面：
<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>請(qǐng)開始你的表演～</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>每個(gè) div 就是一頁(yè) ppt，里面可以隨意排版，data-x 控制位置，data-scale 控制縮放，data-rotate 控制旋轉(zhuǎn)。
更多 API 文檔，請(qǐng)參考如下文檔：
1.酷炫的 HTML5 網(wǎng)頁(yè) PPT
2.文檔地址
為了更好的理解彈幕，我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)版：
1.定義彈幕結(jié)構(gòu)
<div class="jartto_demo">我是彈幕</div>2.定義移動(dòng)動(dòng)畫
@keyframes barrager{
from{
left:100%;
transform:translateX(0);
transform:translate3d(0, 0, 0);
}
to{
left:0;
transform:translate3d(-100%, 0, 0);
}
}注意，使用 translate3d 可以開啟 GPU 硬件加速，會(huì)比 translateX 更流暢一些。
關(guān)于硬件加速，可以關(guān)注我之前寫的一篇文章：詳談層合成（composite）
3.使用動(dòng)畫
1
2
3let window_height=$(window).height() - 150;
bottom=Math.floor(Math.random() * window_height + 40);
code=code.replace(" bottom:{bottom}, //距離底部高度,單位px,默認(rèn)隨機(jī) \n", '');OK，我們通過(guò)三步實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的彈幕動(dòng)畫。那么問(wèn)題來(lái)了，彈幕都是隨機(jī)位置，隨機(jī)速度，隨機(jī)顏色出現(xiàn)在屏幕上的，這個(gè)該如何實(shí)現(xiàn)呢？
4.隨機(jī)彈幕出現(xiàn)位置
1
2let color=`#${Math.floor(Math.random() * (2 << 23)).toString(16)}`;
console.log(color); // #6e83605.隨機(jī)彈幕顏色
let color=`#${Math.floor(Math.random() * (2 << 23)).toString(16)}`;
console.log(color); // #6e8360好了，大功告成，我們順手加上 Socket 事件監(jiān)聽。
6.事件監(jiān)聽為了拿到用戶發(fā)送過(guò)來(lái)的彈幕，我們需要做一個(gè)事件監(jiān)聽（接收服務(wù)端數(shù)據(jù)）：
首先，引入 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: '請(qǐng)輸入內(nèi)容',
},
],
})(<Input size="large" placeholder="發(fā)送消息，嗨起來(lái)～" />)}
</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}>發(fā)送</Button>
</Form.Item>
</div>
</div>當(dāng)我們監(jiān)聽到 server-push 事件的時(shí)候，run 函數(shù)就會(huì)初始化彈幕方法，隨機(jī)生成一條彈幕，在屏幕滑過(guò)。
發(fā)射器就非常簡(jiǎn)單了，我們使用 Create React App 初始化項(xiàng)目，在 src/app.js 中寫入一個(gè)表單(這里以 React 為例，Vue 也是大同小異）：
<div className="app-box">
<div className="form-box">
<Form.Item {...formItemLayout} label="">
{getFieldDecorator('msg', {
rules: [
{
required: true,
message: '請(qǐng)輸入內(nèi)容',
},
],
})(<Input size="large" placeholder="發(fā)送消息，嗨起來(lái)～" />)}
</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}>發(fā)送</Button>
</Form.Item>
</div>
</div>用戶在輸入框輸入消息，向我們的服務(wù)器發(fā)送請(qǐng)求，很簡(jiǎn)單，就不贅述了。效果圖可以參考下面：
請(qǐng)注意，此處為了演示效果，我將三端同框了。
服務(wù)端比較簡(jiǎn)單，使用 Express 初始化一個(gè) Node 項(xiàng)目，向 app.js 寫入如下內(nèi)容：1.啟動(dòng) Socket 服務(wù)：
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.監(jiān)聽 Socket 連接，接收用戶發(fā)送數(shù)據(jù)，將數(shù)據(jù)寫入本地 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.當(dāng)然，我們也可以存入數(shù)據(jù)庫(kù)做持久化，以下演示存入 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.啟動(dòng)服務(wù)
node app.js我們的服務(wù)端就啟動(dòng)起來(lái)了，訪問(wèn)地址是你的主機(jī) IP 和 4000 端口。
本文我們從零到一搭建了一個(gè)完整的彈幕方案，涉及到三部分：主屏，發(fā)射器和服務(wù)端，旨在為小伙伴們提供一套極簡(jiǎn)的設(shè)計(jì)思路。通過(guò) Demo 我們可以簡(jiǎn)單的串聯(lián)一個(gè)全棧項(xiàng)目，做更多有趣的事情。
酷炫的 HTML5 網(wǎng)頁(yè) PPT
成為優(yōu)秀技術(shù)型領(lǐng)導(dǎo)的 16 條黃金法則
四款酷炫「數(shù)字滾動(dòng)」插件
這是時(shí)代的魅力，既創(chuàng)造奇跡，也毀滅奇跡！
多經(jīng)常用到PPT幻燈片的朋友時(shí)常都希望能夠?qū)⒕W(wǎng)絡(luò)上的一些視頻可以插入到自己的PPT模版中，但是都不知道該如何實(shí)現(xiàn)。上次詳細(xì)講解了在PPT中加入視頻的方法，本次我們?cè)賮?lái)講解在PowerPoint2010中實(shí)現(xiàn)加入網(wǎng)絡(luò)視頻的方法。
Powerpoint2010插入土豆網(wǎng)在線視頻方法：
①打開Powerpoint2010，選擇“插入”選項(xiàng)卡中“媒體”選項(xiàng)組中的“視頻”-->“來(lái)自網(wǎng)站的視頻”；
②在彈出的“從網(wǎng)站插入視頻”對(duì)話框中輸入網(wǎng)絡(luò)視頻的地址，然后單擊“插入”按鈕；
③在幻燈版編輯頁(yè)面上出現(xiàn)一個(gè)黑色視頻框，通過(guò)8個(gè)控點(diǎn)用鼠標(biāo)來(lái)調(diào)整視頻合適的大小；
④選擇“視頻工具”-->“播放”-->“播放”進(jìn)行測(cè)試，看看能否鏈接到網(wǎng)站視頻；
好了，到這里我們就已經(jīng)將土豆網(wǎng)的在線視頻的插入到PPT中啦！
注：如何找到網(wǎng)絡(luò)視頻的地址？
大部分視頻網(wǎng)站都提供了視頻的地址。我們可以找到一個(gè)視頻，在其下有一個(gè)“貼到博客或 BBS”的按鈕。單擊此按鈕，在展開的窗口中選擇“HTML 代碼”復(fù)制，即可插入到PowerPoint中了。
于實(shí)現(xiàn)文檔在線預(yù)覽的做法，之前文章提到了的兩種實(shí)現(xiàn)方式：
1、通過(guò)將文檔轉(zhuǎn)成圖片：詳見(jiàn)《文檔在線預(yù)覽（一）通過(guò)將txt、word、pdf轉(zhuǎn)成圖片實(shí)現(xiàn)在線預(yù)覽功能》；
2、將文檔轉(zhuǎn)成html：詳見(jiàn)《文檔在線預(yù)覽（二）word、pdf文件轉(zhuǎn)html以實(shí)現(xiàn)文檔在線預(yù)覽》；
其實(shí)除了這兩種實(shí)現(xiàn)方式之外之外，還有一種常見(jiàn)的做法就是在前端在通過(guò)相關(guān)的在線預(yù)覽組件來(lái)實(shí)現(xiàn)預(yù)覽
在網(wǎng)上的找了一圈實(shí)現(xiàn)方案，發(fā)現(xiàn)還挺多開源組件可以實(shí)現(xiàn)，整理了一下這些開源組件放在了下面的表格里，里面有一些是可以直接通過(guò)npm在vue中引入使用。
文檔格式 | 相關(guān)的開源組件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint（pptx） | pptxjs |
是一個(gè) 純前端的JavaScript庫(kù)，它的優(yōu)點(diǎn)是可以后端就實(shí)現(xiàn)對(duì) .docx 的文件進(jìn)行在線預(yù)覽，但是缺點(diǎn)是 不支持.doc(劃重點(diǎn))。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例
安裝：
npm install docx-preview -S
使用效果：
??Mammoth 原理是將 .docx 文檔并將其轉(zhuǎn)換為 HTML。 注意Mammoth 轉(zhuǎn)換過(guò)程中復(fù)雜樣式被忽，居中、首行縮進(jìn)等，此外同樣也只能轉(zhuǎn)換.docx文檔。
github地址：https://github.com/mwilliamson/mammoth.js
安裝：
npm install mammoth
pdf.js是一款非常優(yōu)秀的pdf解析工具，其實(shí)火狐瀏覽器內(nèi)核自帶pdf預(yù)覽解析器就是pdf.js這個(gè)解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺(tái)可以看到源碼內(nèi)容。
官網(wǎng)地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例
使用效果：
PDFObject.js - 將PDF嵌入到一個(gè)div內(nèi)，而不是占據(jù)整個(gè)頁(yè)面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過(guò)配置PDF.js來(lái)實(shí)現(xiàn)
官網(wǎng)地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
實(shí)現(xiàn)效果：
Vue-pdf是通過(guò)Vue下基礎(chǔ)基于 pdf.js 組件實(shí)現(xiàn)PDF文件的展示，操作和生成的組件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例
安裝：
npm install --save vue-pdf
實(shí)現(xiàn)效果：
iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內(nèi)嵌在這三個(gè)HTML標(biāo)簽內(nèi)，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當(dāng)于一個(gè)新的頁(yè)面內(nèi)嵌在當(dāng)前頁(yè)面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
實(shí)現(xiàn)效果：
js-xlsx是sheetJS出品的讀取和導(dǎo)出各種ecxel的工具庫(kù)，功能十分強(qiáng)大。
xlsx官方文檔：https://www.npmjs.com/package/xlsx
github倉(cāng)庫(kù)： https://github.com/SheetJS/sheetjs
安裝：
npm install xlsx
js-xlsx可以用二進(jìn)制流方式讀取得到整份excel表格對(duì)象
let workbook=XLSX.read(data, { type: "array" }); //表格對(duì)象
let sheetNames=workbook.SheetNames; //獲取到所有表格
let worksheet=workbook.Sheets[sheetNames[0]]; //取第一張表
獲取表格數(shù)據(jù)后再調(diào)用js-xlsx提供的方法，直接將表格數(shù)據(jù)轉(zhuǎn)換為html代碼，再將html代碼渲染到指定容器就完成了
let html=XLSX.utils.sheet_to_html(worksheet);
實(shí)現(xiàn)效果：
? 基于 canvas 來(lái)渲染表格，支持表格過(guò)濾、數(shù)據(jù)編輯、自定義操作菜單、大數(shù)據(jù)場(chǎng)景優(yōu)化、主題樣式修改
github地址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例
安裝：
npm install canvas-datagrid
handsontable基于 DOM 元素來(lái)渲染表格，功能強(qiáng)大，canvas-datagrid` 支持的功能它都支持，并且主題樣式擴(kuò)展更方便
官網(wǎng)地址：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示例
實(shí)現(xiàn)效果：
基于Jquery 表格插件DataTables的一個(gè)表格插件，還在用Jquery 可以以考慮這個(gè)
官網(wǎng)地址：https://www.datatables.net
安裝：
官網(wǎng)下載地址，在你的項(xiàng)目中使用 DataTables，只需要引入三個(gè)個(gè)文件即可，jQuery庫(kù)，一個(gè)DataTables的核心js文件和一個(gè)DataTables的css文件。有的時(shí)候還需要DataTables樣式的一些資源。
<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>
使用方式：
$('#example').DataTable( {
data: data
} );
### 1、PPTXJS PPTXJS是jquery的一個(gè)插件，她的主要功能是實(shí)現(xiàn)pptx轉(zhuǎn)html，用于在線進(jìn)行展示
官網(wǎng)地址：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>
實(shí)現(xiàn)效果：
本文主要介紹了word、excel、pdf、ppt等文件純前端實(shí)現(xiàn)在線預(yù)覽的方式，具體實(shí)現(xiàn)可以是：
### 1、前端根據(jù)不同文件類型使用對(duì)應(yīng)的在線預(yù)覽組件進(jìn)行在線預(yù)覽。 前端通過(guò)判斷不同文件類型的使用對(duì)應(yīng)的在線預(yù)覽組件進(jìn)行在線預(yù)覽。 因?yàn)椴煌愋偷脑诰€預(yù)覽組件不一樣在使用時(shí)預(yù)覽界面會(huì)存在差異，如果需要做的完善一點(diǎn) 最好是把所有用到的組件都統(tǒng)一封裝的一個(gè)在線預(yù)覽的UI界面中。
從本文的測(cè)試情況來(lái)看前端實(shí)現(xiàn)預(yù)覽最好的效果還是PDF，不會(huì)出現(xiàn)一些文字錯(cuò)亂和亂碼的問(wèn)題，這樣能保留文件的一些樣式的效果，同時(shí)前端也只用支持一種文件格式的預(yù)覽，工作量也能大大降低。
以上就是使用js前端實(shí)現(xiàn)word、excel、pdf、ppt等文件在線預(yù)覽的方式的全部?jī)?nèi)容，感謝大家的閱讀！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
