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

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

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

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

实现方案

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

一、docx文件实现前端预览

1、docx-preview

是一个 纯前端的JavaScript库，它的优点是可以后端就实现对 .docx 的文件进行在线预览，但是缺点是 不支持.doc(划重点)。

github地址：https://github.com/VolodymyrBaydalka/docxjs

demo示例

安装：

npm install docx-preview -S

使用效果：

2、Mammoth

??Mammoth 原理是将 .docx 文档并将其转换为 HTML。 注意Mammoth 转换过程中复杂样式被忽，居中、首行缩进等，此外同样也只能转换.docx文档。

github地址：https://github.com/mwilliamson/mammoth.js

安装：

npm install mammoth

二、PDF文件实现前端预览

1、pdf.js

pdf.js是一款非常优秀的pdf解析工具，其实火狐浏览器内核自带pdf预览解析器就是pdf.js这个解析器，我们用火狐浏览器打开pdf文件并按F12打开控制台可以看到源码内容。

官网地址：http://mozilla.github.io/pdf.js

github地址：https://github.com/mozilla/pdf.js

demo示例

使用效果：

2、pdfobject.js

PDFObject.js - 将PDF嵌入到一个div内，而不是占据整个页面，要求浏览器支持显示PDF（主流浏览器都支持），如果浏览器不支持，也可通过配置PDF.js来实现

官网地址: https://pdfobject.com/

github地址：https://github.com/pipwerks/PDFObject

实现效果：

3、vue-pdf

Vue-pdf是通过Vue下基础基于 pdf.js 组件实现PDF文件的展示，操作和生成的组件。

github地址：https://github.com/FranckFreiburger/vue-pdf

demo示例

安装：

npm install --save vue-pdf

实现效果：

4、iframe / object/ embed

iframe / object / embed 使用方法和效果都同理，即将 pdf 作为插件内嵌在这三个HTML标签内，以下用 iframe 为例，效果就如同直接用链接打开 pdf 文件是一样的，相当于一个新的页面内嵌在当前页面中。

<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>

实现效果：

三、Excel文件实现前端预览

1、sheetjs js-xlsx

js-xlsx是sheetJS出品的读取和导出各种ecxel的工具库，功能十分强大。

xlsx官方文档：https://www.npmjs.com/package/xlsx

github仓库： https://github.com/SheetJS/sheetjs

安装：

npm install xlsx

js-xlsx可以用二进制流方式读取得到整份excel表格对象

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

获取表格数据后再调用js-xlsx提供的方法，直接将表格数据转换为html代码，再将html代码渲染到指定容器就完成了

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

实现效果：

2、canvas-datagrid

? 基于 canvas 来渲染表格，支持表格过滤、数据编辑、自定义操作菜单、大数据场景优化、主题样式修改

github地址：https://github.com/TonyGermaneri/canvas-datagrid

demo示例

安装：

npm install canvas-datagrid

3、 handsontable

handsontable基于 DOM 元素来渲染表格，功能强大，canvas-datagrid` 支持的功能它都支持，并且主题样式扩展更方便

官网地址：https://handsontable.com/docs/7.1.0/tutorial-custom-build.html

github地址：https://github.com/handsontable/handsontable

文档地址：https://handsontable.com/docs/javascript-data-grid

安装：

npm install handsontable @handsontable/vue

Demo示例

实现效果：

4、DataTables

基于Jquery 表格插件DataTables的一个表格插件，还在用Jquery 可以以考虑这个

官网地址：https://www.datatables.net

安装：

官网下载地址，在你的项目中使用 DataTables，只需要引入三个个文件即可，jQuery库，一个DataTables的核心js文件和一个DataTables的css文件。有的时候还需要DataTables样式的一些资源。

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

使用方式：

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

四、pptx文件实现前端预览

### 1、PPTXJS PPTXJS是jquery的一个插件，她的主要功能是实现pptx转html，用于在线进行展示

官网地址：https://pptx.js.org/index.html

github地址：https://github.com/meshesha/PPTXjs

PPTXjs | Demos

使用示例：

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

实现效果：

总结

本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，具体实现可以是：

### 1、前端根据不同文件类型使用对应的在线预览组件进行在线预览。 前端通过判断不同文件类型的使用对应的在线预览组件进行在线预览。 因为不同类型的在线预览组件不一样在使用时预览界面会存在差异，如果需要做的完善一点 最好是把所有用到的组件都统一封装的一个在线预览的UI界面中。

2、后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果

从本文的测试情况来看前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。

以上就是使用js前端实现word、excel、pdf、ppt等文件在线预览的方式的全部内容，感谢大家的阅读！

了解同学们的专业学习情况，增强团队协作能力，近日，金盾2201班举行了以小组为单位的HTML网页项目验收。本次项目验收特邀邓旎、唐勇两位老师担任评委。

金盾特训班作为我校以高薪就业为终极目标的特色班级，除了日常文化课学习之外，提升项目实战经验也成为了他们必不可少的日常操练项。

验收现场

各小组以PPT讲解结合网页作品演示的形式，从想法构思、选定项目、作品功能实现等方面来展示团队作品。每位同学轮流上台讲解，在操作演示中突显实践的重要性。

项目验收考验的是大家代码知识的运用情况，同时还能提高表达能力及项目制作水平，为成为一名“准职业人”打好基础。大家纷纷表示，虽然在过程中遇到了数不清的困难，但是并没有因此而放弃，在老师的辅导和组员之间的互帮互助下，促使此次项目圆满完成。

颁奖典礼

经评委现场评分，最终评选出团队一、二、三等奖及优秀个人奖。

团队一等奖

王涵、李嘉星、刘灿、段李可

团队二等奖

姚宏源、周旺、骆鹏飞、凌海峰

团队三等奖

潘虹、张雅婷、胡伟

优秀个人奖

罗浩智、付清、陈韬、殷明、莫艺清

此次项目验收，充分展示了金盾班同学的理论水平、专业知识、语言表达与实践操作能力，希望各位同学再接再厉，发挥个人潜能，展示出更加优秀的作品。

将毕业的应届生，为毕业答辩做准备，还在熬夜做PPT？

领导通知交工作汇报PPT，找不到PPT模板，怎么办？

给学生上网课，准备的PPT课件太丑了

......

相信这些场景，大部分人都遇到过。急需模板，却不知道在哪找？

所以，这篇文章，给大家分享一个非常好用的模板网站。

PPT超级商店

http://ppt.sotary.com/web/wxapp/index.html

不同于其他的PPT模板网站，这个网站简洁无套路，没有其他复杂的资源，里面都是一些优质PPT模板，下载也很方便。

使用方法：

点击自己挑选的PPT模板，进入页面展示页，会看到每一页的模板的设计。滑到结尾，就会看到有一个下载的指示图标，直接点击就可以了下载了，免费，但是不可商用。

同样，可以通过搜索关键词，快速获取你所需要的PPT模板。

值得推荐的4个理由：

1、模板不定时更新，涵盖各种类型，适用于各种使用场景

包括答辩PPT、工作汇报PPT、商业计划书、述职报告等等

2、PPT质量高

我下载了一份黑色商务风的PPT模板，页面简约，但也非常炫酷，挑几页给大家展示一下：

是不是很不错呢？

3、免费下载无套路

网站里提供的所有资源都可以免费下载，没有免费付费之分，不用纠结，挑选了一套合适的模板，但却需要付钱的尴尬。

网站缺点

1、 PPT模板资源有限，只有PPT模板，类型单一

只提供PPT模板，没有其他素材和工具

2、设计风格都比较简约

3、不可商用

以上，经常需要PPT模板的朋友，一定要收藏这个网站呀~

福利：

关注@PPT进化论 ，私信回复关键词【30 套】，即可获取我收藏的优质职场类PPT模板资源了！