【 React-H5】 在線預覽word,pdf,docx格式的文件

業務需求：h5鏈接展示一個檢查項目的知情同意書，第三方接口返回是一個docx文件鏈接 ，需要以彈框的形式展示在手機上，

起初 iframe套着 直接訪問服務器上docx格式文件鏈接，會直接進行下載，於是找到插件【 react-file-viewer】

可支持的預覽:

• Images: png, jpeg, gif, bmp, including 360-degree images (360度圖像)
• pdf
• csv
• xslx
• docx
• Video: mp4, webm
• Audio: mp3

使用規則：

【必傳】filePath：使用資源的url  

【必傳】fileType:展示的文件類型 png/video/docx。。。。。

  errorComponent:出現錯誤時展示的組件

unsupportedComponent：出現不支持文件格式的情況下展現的組件

onError：文件查看器獲取或請求資源錯誤時將調用的函數,可以在此傳遞日志記錄實用程序的回調。

官網：https://www.npmjs.com/package/react-file-viewer

注意事項：

react版本16+ 正常

react版本小於16 需指定版本號 cnpm install react-file-viewer@0.5.0

start

1.安裝插件

cnpm install react-file-viewer

2.組件引用 使用

import FileViewer from 'react-file-viewer'; 

 

 2.1 --- informedUrl type 可動態傳入 增加可擴展性 根據項目type 當前只可能是一種格式 （docx） 第三方返回  受限 故寫s

  


 {/* 預覽docx組件 */}
                        <FileViewer
                            fileType={type}
                            filePath={file}
                            // errorComponent={CustomErrorComponent}
                            onError={this.onError} />

 

 3.效果  彈框內容為一段.docx線上鏈接