js怎麼實現文件預覽功能,js怎麼實現文件預覽功能打開

本文目錄一覽：

• 1、react–使用js-xlsx實現excel文件的導入導出及預覽
• 2、pdf.js 如何預覽本地文件
• 3、前台js有沒有辦法實現附件比如word或者pdf的預覽
• 4、js怎麼做本地的視頻文件的預覽

react–使用js-xlsx實現excel文件的導入導出及預覽

    最近公司項目要求對之前後端excel操作做優化，需要放到前端來做。講道理，我覺得沒啥子必要，尤其是當我在官網導入一張5k+的excel時瀏覽器卡死後更是覺得需求之智障。但是沒法子，還是要先自己做出來看看實際效果才行，我直接原地6個點……

導出

     安裝依賴

        cnpm i xlsx –save

     實現

         定義公共組件Excel，該組件需要提供導出按鈕，當點擊時觸發相應邏輯

         組件可接收的參數如下

                默認值如下

             根據傳入的type類型決定到底是顯示導入、導出、預覽按鈕還是都顯示

             當點擊導出按鈕，觸發回調

                引入xlsx

                導出邏輯

                首先要做的就是校驗是否用戶自己實現了導出函數，以及傳入的數據是否為數據且是否為空，由於不止導出要用，故放到untils中作公共函數，其他的輔助函數也從中導出

                     isVoid函數

                      getTable函數

                     getSheetHead函數

                     format函數

                     getCharCol函數

             導出結果如下

     改進

        可能你也發現了，導出的結果是沒有樣式信息的,那麼如何增加樣式呢？答案是xlsx-style

         安裝依賴

            cnpm i xlsx-style –save

            npm install file-saver –save

         xlsx-style導入報錯

            將報錯文件copy一份，修改後放到assets目錄下

            找到umijs的webpack配置文件，新增如下配置

         增加文字顏色和首行高亮處理

                增加輔助函數calculateWidth

                增加輔助函數addHeadlineStyle

                導出方式使用filesave

                效果如下

導入

        現在，我們來完成導入功能，並且導入後需要使用表格進行分頁預覽

         新增modal彈窗，用作預覽界面

        對應函數renderBody如下

        對應函數renderButton如下

        對應函數onPageChange如下

        點擊導入按鈕，回調處理如下

        新增的輔助函數如下

        新增組件狀態如下

        導入預覽效果如下

文檔

如有問題，歡迎評論指正哦~~

最後，還有個很重要的事情，點個贊再走吧，客官~~

pdf.js 如何預覽本地文件

pdf.js預覽文件必須只能是在伺服器部署的項目路徑下，不能通過修改配置的方式支持本地路徑的文件，否則會有js跨域問題。如果要顯示本地文件，可以折中考慮先做一個上傳功能將文件上傳到伺服器上然後在頁面上展示，這樣基本實現了預覽本地文件。

前台js有沒有辦法實現附件比如word或者pdf的預覽

pdf的預覽是可以實現的，world文檔因為有複雜表格什麼的不好處理，所以最好轉換為pdf再預覽；

pdf.js實現載入整個pdf

網頁鏈接

js怎麼做本地的視頻文件的預覽

用這個方法：varWordApp=newActiveXObject(“Word.Application”);//註：IE的ActiveX安全性能放開才行WordApp.Application.visible=false;varDoc=WordApp.documents.open(path);//對word的操作見office的MSDNWordApp.quit();