整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前有许多在线转档工具可以解决使用者的格式转换需求，共通性是通过浏览器开启网站即可进行转换，无需额外下载、安装软件或工具，因为这些服务多半将文件上传远程服务器进行处理，即使是移动设备也能正常执行，例如 Convertr 就整合音讯、影片和其他文件格式的在线转档：
本文要介绍的「cdkm」是一个免费在线转档工具，号称次世代转换器、整合许多开放原始码项目建构而成，支持各种常见常用文件类型，包括文件、电子书、图片、影片、音乐或是一些比较少用的格式，不过要注意的是 cdkm 每次转换最多只能上传 10 个文件（如果有开启广告阻挡器就无法使用批次转换功能）。
cdkm 可转档的文件文件最大 40 MB，其他格式文件最大 200 MB，虽然转换速度快，若遇到文件过大就有很大的机会无法成功转换。
cdkm 支持以下格式（完整列表）：
转换后文件可直接下载或是产生分享链接，提供给其他人下载、使用，有些文件格式还能直接在浏览器进行预览，如果临时需要转档、但手边又没有合适的转档工具就可以试试看。
网站链接：https://cdkm.com/
使用教学
开启 cdkm 网站后点选「Choose Files」选择要转换的源文件或选择「remote file URL」以远程文件链接方式输入文件进行转换。
cdkm 不会自动选择可转换的格式，使用者需要从右侧的「Target Format」目标格式选择要转换的文件新格式，依照不同类型分类更容易寻找。
选好后点选最右边的红色按钮「Start Convertsion」开始转换，转换时需要一段时间将文件上传到远程服务器，完成后结果文件就会显示在下方的 Output Files 字段，点选后方「Download」按钮就能将转换后的文件下载保存。
有些文件还可以直接在线预览，如果要复制下载链接可点选「Copy to clipboard」就能将文件网址复制到剪贴簿。
值得一试的三个理由：
于实现文档在线预览的做法，之前文章提到了的两种实现方式：
1、通过将文档转成图片：详见《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》；
2、将文档转成html：详见《文档在线预览（二）word、pdf文件转html以实现文档在线预览》；
其实除了这两种实现方式之外之外，还有一种常见的做法就是在前端在通过相关的在线预览组件来实现预览
在网上的找了一圈实现方案，发现还挺多开源组件可以实现，整理了一下这些开源组件放在了下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。
文档格式 | 相关的开源组件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint（pptx） | pptxjs |
是一个 纯前端的JavaScript库，它的优点是可以后端就实现对 .docx 的文件进行在线预览，但是缺点是 不支持.doc(划重点)。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例
安装：
npm install docx-preview -S
使用效果：
Mammoth 原理是将 .docx 文档并将其转换为 HTML。 注意Mammoth 转换过程中复杂样式被忽，居中、首行缩进等，此外同样也只能转换.docx文档。
github地址：https://github.com/mwilliamson/mammoth.js
安装：
npm install mammoth
pdf.js是一款非常优秀的pdf解析工具，其实火狐浏览器内核自带pdf预览解析器就是pdf.js这个解析器，我们用火狐浏览器打开pdf文件并按F12打开控制台可以看到源码内容。
官网地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例
使用效果：
PDFObject.js - 将PDF嵌入到一个div内，而不是占据整个页面，要求浏览器支持显示PDF（主流浏览器都支持），如果浏览器不支持，也可通过配置PDF.js来实现
官网地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
实现效果：
Vue-pdf是通过Vue下基础基于 pdf.js 组件实现PDF文件的展示，操作和生成的组件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例
安装：
npm install --save vue-pdf
实现效果：
iframe / object / embed 使用方法和效果都同理，即将 pdf 作为插件内嵌在这三个HTML标签内，以下用 iframe 为例，效果就如同直接用链接打开 pdf 文件是一样的，相当于一个新的页面内嵌在当前页面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
实现效果：
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);
实现效果：
基于 canvas 来渲染表格，支持表格过滤、数据编辑、自定义操作菜单、大数据场景优化、主题样式修改
github地址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例
安装：
npm install canvas-datagrid
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示例
实现效果：
基于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
} );
### 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界面中。
从本文的测试情况来看前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
以上就是使用js前端实现word、excel、pdf、ppt等文件在线预览的方式的全部内容，感谢大家的阅读！
于实现文档在线预览的做法，之前文章提到了的两种实现方式：
1、通过将文档转成图片：详见《文档在线预览新版（一）通过将文件转成图片实现在线预览功能》；
2、将文档转成html：详见《文档在线预览新版（二）通过将文件统一转成html以实现在线预览》；
3、将文档转成pdf：详见 《文档在线预览新版（三）通过将文件统一转成pdf来实现在线预览》；
其实除了这三种实现方式之外之外，还有一种常见的做法就是在统一都由前端通过相关的在线预览组件来实现预览
在网上的找了一圈实现方案，发现还挺多开源组件可以实现，整理了一下这些开源组件放在了下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。
文档格式 | 相关的开源组件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint（pptx） | pptxjs |
是一个 纯前端的JavaScript库，它的优点是可以后端就实现对 .docx 的文件进行在线预览，但是缺点是 不支持.doc(划重点)。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例：https://volodymyrbaydalka.github.io/docxjs
安装：
npm install docx-preview -S使用效果：
Mammoth 原理是将 .docx 文档并将其转换为 HTML。 注意Mammoth 转换过程中复杂样式被忽，居中、首行缩进等，此外同样也只能转换.docx文档。
github地址：https://github.com/mwilliamson/mammoth.js
安装：
npm install mammothpdf.js是一款非常优秀的pdf解析工具，其实火狐浏览器内核自带pdf预览解析器就是pdf.js这个解析器，我们用火狐浏览器打开pdf文件并按F12打开控制台可以看到源码内容。
官网地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例：https://mozilla.github.io/pdf.js/web/viewer.html
使用效果：
PDFObject.js - 将PDF嵌入到一个div内，而不是占据整个页面，要求浏览器支持显示PDF（主流浏览器都支持），如果浏览器不支持，也可通过配置PDF.js来实现
官网地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
实现效果：
Vue-pdf是通过Vue下基础基于 pdf.js 组件实现PDF文件的展示，操作和生成的组件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例：https://jsfiddle.net/fossfiddler/5k4ptmqg/145/
安装：
npm install --save vue-pdf实现效果：
iframe / object / embed 使用方法和效果都同理，即将 pdf 作为插件内嵌在这三个HTML标签内，以下用 iframe 为例，效果就如同直接用链接打开 pdf 文件是一样的，相当于一个新的页面内嵌在当前页面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>实现效果：
js-xlsx是sheetJS出品的读取和导出各种ecxel的工具库，功能十分强大。
xlsx官方文档：https://www.npmjs.com/package/xlsx
github仓库： https://github.com/SheetJS/sheetjs
安装：
npm install xlsxjs-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);实现效果：
基于 canvas 来渲染表格，支持表格过滤、数据编辑、自定义操作菜单、大数据场景优化、主题样式修改
github地址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例：https://codesandbox.io/s/handsontable-vue-data-grid-hello-world-app-forked-z288wy
安装：
npm install canvas-datagrid
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/vueDemo示例：https://handsontable.com/demo
实现效果：
基于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
} );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等文件纯前端实现在线预览的方式，具体实现可以是：
前端通过判断不同文件类型的使用对应的在线预览组件进行在线预览。 因为不同类型的在线预览组件不一样在使用时预览界面会存在差异，如果需要做的完善一点 最好是把所有用到的组件都统一封装的一个在线预览的UI界面中。
从本文的测试情况来看前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
以上就是使用js前端实现word、excel、pdf、ppt等文件在线预览的方式的全部内容，感谢大家的阅读！
*请认真填写需求信息，我们会在24小时内与您取得联系。
