最近做一個專案要求在前端瀏覽器可以直接開啟office檔案（pdf,doc,xlsx等檔案）。pdf瀏覽器可以直接開啟（可以直接用a標籤href="檔案地址"或者iframe標籤src="檔案地址"再或者使用pdf.js）。但是word,xlsl等檔案很難實現，網上的實現方式有微軟的方法實現但是訪問的檔案地址必須是公共檔案，所有人都能訪問到才可以使用，顯然是不行的，所以我就找到了react-file-viewer。
1.實現pdf預覽。
(1)用iframe標籤src="檔案地址"就可以直接開啟，還可以設定width,height等屬性。具體參考iframe屬性。
<iframe src="http://localhost:8080/%E9%9F%A6%E6%88%90%E7%8E%89.pdf"></iframe>
（2)直接a標籤src="檔案地址"
<a href="檔案地址"></a>
2.使用react-file-viewer實現（pdf,word,xlsx檔案）預覽
1.npm install react-file-viewer
2.在組建中引入import FileViewer from 'react-file-viewer';
3.直接使用（涉及到跨域問題自行解決可以使用代理來解決別的方案也可行）
<FileViewer
fileType='docx'//檔案型別
filePath={wo} //檔案地址（後臺給返的二進位制流也可以）
onError={this.onError.bind(this)} //函式[可選]：當檔案檢視器在獲取或呈現請求的資源時發生錯誤時將呼叫的函式。在這裡可以傳遞日誌記錄實用程式的回撥。
errorComponent={console.log("出現錯誤")} //[可選]：發生錯誤時呈現的元件，而不是react-file-viewer隨附的預設錯誤元件。
unsupportedComponent={console.log("不支援")} //[可選]：在不支援檔案格式的情況下呈現的元件。
/>
支援的檔案格式：
圖片：png，jpeg，gif，bmp，包括360度圖片
pdf格式
CSV
xslx
docx
視訊：mp4，webm
音訊：mp3
用法
請注意，此模組最適合React 16+。如果您使用React <16，則可能需要使用版本0.5。npm install [email protected]。
有一個主要的React元件FileViewer，它具有以下道具：
fileType字串：要顯示的資源型別（一種受支援的檔案格式，例如'png'）。傳遞不支援的檔案型別將導致顯示unsupported file type訊息（或自定義元件）。
filePath 字串：FileViewer顯示的資源的URL（後臺給返的二進位制流也可以）。
onError函式[可選]：當檔案檢視器在獲取或呈現請求的資源時發生錯誤時將呼叫的函式。在這裡可以傳遞日誌記錄實用程式的回撥。
errorComponent react元素[可選]：發生錯誤時呈現的元件，而不是react-file-viewer隨附的預設錯誤元件。
unsupportedComponent react元素[可選]：在不支援檔案格式的情況下呈現的元件。
3. react-file-viewer報錯（採坑只限瀏覽本地檔案）
這個是因為後端還沒做好，我拿本地檔案做測試才會遇到.我把本地docx檔案放到了assets檔案中然後引入遇到一堆問題。
<FileViewer fileType='docx'
filePath='../../../assets/ss.docx'
onError={this.onError.bind(this)}
errorComponent={console.log("出現錯誤")}
unsupportedComponent={console.log("不支援")}
/>
(1)瀏覽器報：Module parse failed: Unexpected character '' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
cmd執行視窗報：Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
造成這兩個錯誤的根本原因是react不識別字尾名為.docx的檔案。
解決方案：
去webpack（webpack.config.js）裡面配置檔案字尾名在module.exports加入
{
test: /\.(pdf|svg|docx|doc)$/,
use: 'file-loader',//如果不可以試試這個file-loader?name=[path][name].[ext]
}
本以為這樣就好了，現實是還是不行頁面還是不顯示一直轉圈並且瀏覽器報找不到http://localhost:8888/assets/ss.docx，但是我地址寫對了，找了很久都不知到原因最後換了種方式就可以了。
解決方案：用require或者import來引入就行了（react專案中圖片出不來用require也可以解決）；
<FileViewer fileType='docx'
filePath={require('../../../assets/ss.docx')}
onError={this.onError.bind(this)}
errorComponent={console.log("出現錯誤")}
unsupportedComponent={console.log("不支援")}
/>
//或者直接用在上面定義變數引入
const wo=require("../../../assets/ss.docx");//這個也可以
import wo from '../../../assets/ss.docx'; //require,import只保留一個
<FileViewer fileType='docx'
filePath={wo}
onError={this.onError.bind(this)}
errorComponent={console.log("出現錯誤")}
unsupportedComponent={console.log("不支援")}
/>