文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览

本文介绍: 关于实现文档在线预览的做法，之前文章提到了的两种实现方式：1、通过将文档转成图片：详见《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》；2、将文档转成html：详见《文档在线预览（二）word、pdf 文件转html以实现文档在线预览》；其实除了这两种实现方式之外之外，还有一种常见的做法就是在前端在通过相关的在线预览组件来实现预览在网上的找了一圈实现方案，发现还挺多开源组件可以实现，整理了一下这些开源组件放在了下面的表格里，里面有一些是可以直接通过 npm在vue中引入使用。是一

关于实现文档在线预览的做法，之前文章提到了的两种实现方式：

1、通过将文档转成图片：详见《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》；

2、将文档转成html：详见《文档在线预览（二）word、pdf文件转html以实现文档在线预览》；

其实除了这两种实现方式之外之外，还有一种常见的做法就是在前端在通过相关的在线预览组件来实现预览

在网上的找了一圈实现方案，发现还挺多开源组件可以实现，整理了一下这些开源组件放在了下面的表格里，里面有一些是可以直接通过 npm在vue中引入使用。

文档格式	相关的开源组件
word(d oc x)	d oc x–pre view、m a m mot h
pdf	p df.js、p df object.js、vue–p df
excel	sheet js js–xlsx、canvas–datagrid、hands on table、Da t aTables
pow e r point（pptx）	pptx js

npm install docx-preview -S

npm install mammoth

npm install --save vue-pdf

&lt;iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"&gt;&lt;/iframe&gt;

npm install xlsx

let workbook = XLSX.read(data, { type: "array" });   //表格对象
let sheetNames = workbook.SheetNames;  //获取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]];  //取第一张表

let html = XLSX.utils.sheet_to_html(worksheet);

npm install canvas-datagrid

npm install handsontable @handsontable/vue

<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>

$('#example').DataTable( {
    data: data
} );

<div id="slide-resolte-contaniner" ></div> 
<script> 
  $("#slide-resolte-contaniner").pptxToHtml({ 
    pptxFileUrl: "Sample_demo1.pptx", 
    slidesScale: "50%", 
    slideMode: false, 
    keyBoardShortCut: false 
  }); 
</script>