在线预览Word、Excel、PowerPoint等文件

在我们工作时，经常会有在线查看各种不同类型的文件的需要，如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样式，实现预览

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> 
<script type="text/javascript" src="./js/filereader.js">script> 
<script type="text/javascript" src="./js/d3.min.js">script> 
<script type="text/javascript" src="./js/nv.d3.min.js">script> 
<script type="text/javascript" src="./js/pptxjs.js">script>
<script type="text/javascript" src="./js/divs2slides.js">script> 

<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 文件了。