前言

眾所周知，word、excel、ppt 和 pdf 文件在線預(yù)覽有很多解決方案，但大多無(wú)法播放 ppt 動(dòng)畫，或者功能非常單一。這不，最近產(chǎn)品經(jīng)理閉關(guān)修煉三天，提出了如下需求：

• 監(jiān)聽(tīng)文檔翻頁(yè)，根據(jù)頁(yè)碼執(zhí)行相應(yīng)的操作
• 文檔轉(zhuǎn)圖片，每一頁(yè)轉(zhuǎn)成一張圖片
• ppt 動(dòng)畫、內(nèi)嵌視頻在線播放
• ppt 多人同步播放
• ppt 畫板功能

今天就給大家介紹一下幾種主流的文檔預(yù)覽方案，有免費(fèi)，有收費(fèi)的，希望對(duì)大家有所幫助。

微軟的 office Web Viewer

調(diào)用微軟的 office 在線預(yù)覽服務(wù)，用法也比較簡(jiǎn)單：

http://view.Officeapps.live.com/op/view.aspx?src=文件地址

優(yōu)點(diǎn)是免費(fèi)，可以實(shí)現(xiàn) ppt 動(dòng)畫播放；缺點(diǎn)就是沒(méi)有擴(kuò)展性，無(wú)法實(shí)現(xiàn)其他功能。

官方示例：

https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-Documents-in-a-browser/?eu=true

百度文檔服務(wù) DOC

百度文檔服務(wù)是將文件上傳至百度服務(wù)器，進(jìn)行轉(zhuǎn)碼，轉(zhuǎn)碼成功之后會(huì)拿到一個(gè) docId，根據(jù) docId 預(yù)覽不同的文件。在控制臺(tái)中上傳文檔，然后復(fù)制以下代碼，替換docId，即可在瀏覽器中預(yù)覽。

<div id="reader"></div>
<script src="http://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>
<script type="text/javascript">
  (function () {
    var option = {
      docId: "doc-xxxxxx",
      token: "TOKEN",
      host: "BCEDOC",
      width: 800, // 文檔容器寬度
      pn: 2, // 定位到第幾頁(yè)，可選
      ready: function (handler) { // 設(shè)置字體大小和顏色, 背景顏色（可設(shè)置白天黑夜模式）
        handler.setFontSize(1);
        handler.setBackgroundColor("#000");
        handler.setFontColor("#fff");
      },
      flip: function (data) { // 翻頁(yè)時(shí)回調(diào)函數(shù), 可供客戶進(jìn)行統(tǒng)計(jì)等
        console.log(data.pn);
      },
      fontSize: "big",
      toolbarConf: {
        page: true, // 上下翻頁(yè)箭頭圖標(biāo)
        pagenum: true, // 幾分之幾頁(yè)
        full: false, // 是否顯示全屏圖標(biāo),點(diǎn)擊后全屏
        copy: true, // 是否可以復(fù)制文檔內(nèi)容
        position: "center" // 設(shè)置 toolbar中翻頁(yè)和放大圖標(biāo)的位置(值有l(wèi)eft/center)
      } //文檔頂部工具條配置對(duì)象,必選
    };
    new Document("reader", option);
  })();
</script>

可以看到百度文檔的配置還是挺多的，文檔轉(zhuǎn)圖片、監(jiān)聽(tīng)翻頁(yè)都不是問(wèn)題，不過(guò)缺點(diǎn)就是 ppt 動(dòng)畫播放不了。

官方網(wǎng)址：

https://cloud.baidu.com/product/doc.html

永中 DCS 文檔預(yù)覽

永中的功能還是很強(qiáng)大的，分為私有云和公有云，私有云就是部署在自己的服務(wù)器上，公有云就是用永中的服務(wù)器。公有云有免費(fèi)版，可以實(shí)現(xiàn)基本的預(yù)覽功能。私有云支持定制，上述功能基本都可以實(shí)現(xiàn)。

官網(wǎng)上有很多示例，大家也可以把自己的文件上傳上去，預(yù)覽體驗(yàn)一下。

官方示例：

https://www.yozodcs.com/page/example.html

Office Web 365

office web 365 和永中 DCS 類似，也有部署版和在線版，不過(guò)部署版和在線版功能都非常強(qiáng)大，滿足你對(duì)文檔預(yù)覽的所有幻想。

office web 365 也有免費(fèi)版，使用方法很簡(jiǎn)單，先注冊(cè)賬號(hào)登錄，然后把文件下載地址所在的域名添加到后臺(tái)，后臺(tái)會(huì)根據(jù)域名生成一個(gè)網(wǎng)站 ID，然后再使用下面的預(yù)覽地址就可以了。

預(yù)覽地址：

http://ow365.cn/?i=您的網(wǎng)站ID&furl=要預(yù)覽的Office文件下載地址

如果文件下載地址是 https 開(kāi)頭，那么還要加一個(gè) ssl=1 參數(shù)：

http://ow365.cn/?ssl=1&i=您的網(wǎng)站ID&furl=要預(yù)覽的Office文件下載地址

官方示例：

https://officeweb365.com/Default/Viewview

總結(jié)

以上就是最主流的文檔預(yù)覽方案，如果產(chǎn)品經(jīng)理再讓你開(kāi)發(fā)這些功能，知道怎么做了吧。只要有 money，就沒(méi)有實(shí)現(xiàn)不了的功能 下面來(lái)做個(gè)小小的總結(jié)：

以上內(nèi)容本人花了大量時(shí)間調(diào)研、嘗試，如果對(duì)你有所幫助，不要忘了點(diǎn)個(gè)贊再走呦~

有問(wèn)題歡迎評(píng)論區(qū)留言~