在我們工作時，經常會有在線查看各種不同類型的文件的需要，如Word文檔、Excel表格、PowerPoint幻燈片和PDF等。可以直接在這里預覽：https://www.compdf.com/webviewer/demo

Word 文件實現前端預覽

方案一：

使用 XDOC 可以實現預覽以 DataURI 表示的 word 文檔，此外 XDOC 還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

下面是使用 XDOC 實現預覽 DOCX 文檔的代碼示例：

注意：文檔地址要用utf-8編碼，并且外網可訪問

示例代碼：

window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx"));

方案二：

使用 docx-preview 開源組件實現 word 文件預覽

1. npm 安裝 docx-preview

2. 獲取 word文檔 blob 數據流

3. 調用 docx-preview 提供的 renderAsync 方法，并將獲取的 blob 數據流傳入方法中，渲染word文檔

示例代碼：

import Axios from "axios";
import { renderAsync } from "docx-preview";Axios.get('文檔下載路徑',{responseType: 'blob'
}).then(({data}) => {renderAsync(data, document.getElementById("container")) // 渲染到頁面
})

Excel 文件實現前端預覽

1. 使用 npm 命令安裝庫：

   npm i exceljs handsontable @handsontable/vue

2. 使用 exceljs 解析數據，通過 workbook.getWorksheet 方法獲取到每一個工作表的數據，將數據處理成一個二維數組的數據

3. 引入 @handsontable/vue 的組件HotTable

4. 通過settings屬性，將一些配置參數和二維數組數據傳入組件，渲染成excel樣式，實現預覽

<template><input type="file" @hange='handleFile' /><hot-table  :settings="hotSettings"></hot-table>
</template><script setup>import Excel from 'exceljs';import { HotTable } from "@handsontable/vue";import { ref } from 'vue';const data = ref([]);const handleFile = (e) => {const file = e.target.files[0];const workbook = new Excel.Workbook();await workbook.xlsx.load(file)// 第一個工作表const worksheet = workbook.getWorksheet(1);// 遍歷工作表中的所有行（包括空行）data.value = worksheet.getRows(1, worksheet.actualRowCount);})const hotSettings = {language: "zh-CN",readOnly: true,data: data.value,mergeCells: this.merge,colHeaders: true,rowHeaders: true,height: "auto",outsideClickDeselects: false,licenseKey: "non-commercial-and-evaluation"}
</script>

PowerPoint 文件實現前端預覽

使用 jszip 和 pptxjs 實現 PowerPoint 文件預覽

<div id="slide-resolte-contaniner" ></div> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show --><script> $("#slide-resolte-contaniner").pptxToHtml({ pptxFileUrl: "Sample_demo1.pptx", slidesScale: "50%", slideMode: false, keyBoardShortCut: false }); 
</script>

PDF 文件實現前端預覽

使用 ComPDFKit PDF SDK 實現 PDF 文件的在線預覽

第一步：添加 ComPDFKit PDF SDK 包

1. 將 @compdfkit 文件夾添加到項目的 根 目錄或 assets 目錄下的 lib 目錄中。這將作為 ComPDFKit PDF SDK for Web 的入文件，并將它導入到您的項目中。

2. 將包含運行 ComPDFKit PDF SDK for Web 所需的靜態資源文件的 webviewer 文件夾添加到項目的靜態資源文件夾中。

第二步：顯示PDF文檔

1. 將 @compdfkit 文件夾中的 webviewer.js 文件導入到您的項目中。

2. 調用 ComPDFKitViewer.init() 在您的項目中初始化 ComPDFKit Web Viewer。

3. 將要顯示的 PDF 地址和許可證密鑰傳遞給 init 函數

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({pdfUrl: 'Your PDF Url',license: 'Input your license here'
}, viewer)
.then((core) => {const docViewer = core.docViewer;docViewer.addEvent('documentloaded', () => {console.log('ComPDFKit Web Viewer loaded');})
})

4. 項目運行后，您就可以看到要顯示的 PDF 文件了。