業務需求：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

官網：

注意事項：

react版本16+ 正常

react版本小於16 需指定版本號 cnpm install [email protected]

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線上連結