前言

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

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

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

微軟的 office Web Viewer

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

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

優(yōu)點是免費，可以實現(xiàn) ppt 動畫播放；缺點就是沒有擴展性，無法實現(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)碼成功之后會拿到一個 docId，根據(jù) docId 預(yù)覽不同的文件。在控制臺中上傳文檔，然后復(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, // 定位到第幾頁，可選
      ready: function (handler) { // 設(shè)置字體大小和顏色, 背景顏色（可設(shè)置白天黑夜模式）
        handler.setFontSize(1);
        handler.setBackgroundColor("#000");
        handler.setFontColor("#fff");
      },
      flip: function (data) { // 翻頁時回調(diào)函數(shù), 可供客戶進(jìn)行統(tǒng)計等
        console.log(data.pn);
      },
      fontSize: "big",
      toolbarConf: {
        page: true, // 上下翻頁箭頭圖標(biāo)
        pagenum: true, // 幾分之幾頁
        full: false, // 是否顯示全屏圖標(biāo),點擊后全屏
        copy: true, // 是否可以復(fù)制文檔內(nèi)容
        position: "center" // 設(shè)置 toolbar中翻頁和放大圖標(biāo)的位置(值有l(wèi)eft/center)
      } //文檔頂部工具條配置對象,必選
    };
    new Document("reader", option);
  })();
</script>

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

官方網(wǎng)址：

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

永中 DCS 文檔預(yù)覽

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

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

官方示例：

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

Office Web 365

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

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

預(yù)覽地址：

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

如果文件下載地址是 https 開頭，那么還要加一個 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)理再讓你開發(fā)這些功能，知道怎么做了吧。只要有 money，就沒有實現(xiàn)不了的功能 下面來做個小小的總結(jié)：

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

有問題歡迎評論區(qū)留言~