WEB在线预览PDF，WORD方案总结

Posted 2022-12-11 supingemail

好记忆不如烂笔头，能记下点东西，就记下点，有时间拿出来看看，也会发觉不一样的感受。

目录

一、PDF的预览方式

1.PDFObject

2.PDF.JS

3.jsPDF

4.jQuery Media Plugin

5.Google Docs PDF viewer

6.ZOHO Viewer

7.Anychart：使用JavaScript导出PDF

8.jQuery Document Viewer

二、Word的预览方式

1.jQuery Media Plugin

2.PDFObject

3.PDF.JS

三、集成预览

---

WEB预览pdf或word，在web应用中，使用的频率其实还是蛮多的，很多时候，都只是做展示，还不是在线编辑，在线编辑是比展现更高的一个使用层次。

如果要实现pdf 或 word 的预览，那么该有哪些实现技术呐，答案下文揭晓：

一、PDF的预览方式

主要是借助各种JS技术，实现PDF的预览，主要有以下几种：

1.PDFObject

官网：https://pdfobject.com/

PDFobject可以帮助你在页面直接嵌入pdf文件，有时候有些项目需要动态地嵌入PDF文件。PDFObject为此而设计的，他能够快速和容易的嵌入PDF文件，PDFObject使用javascript来产生相同的符合标准的 标记，然后插入 到您的html元素的选择。您可以填满整个浏览器窗口，或将PDF格式转换成一个或其他块级元素。

java实现可参考：https://blog.csdn.net/rhx_1989/article/details/108473596，

2.PDF.JS

官网：https://mozilla.github.com/pdf.js/

和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同，PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件，基于JavaScript技术编写而成，无需任何本地技术支持。pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的，基于标准的网络平台，能够解析和渲染PDF文件，并最终发布一个PDF阅读器扩展，毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF 阅读器，但是具体整合时间表尚未确定

3.jsPDF

官网：https://parall.ax/

jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。

4.jQuery Media Plugin

官网：https://jquery.malsup.com/media/

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件，它支持大部分的网络多媒体播放器和多媒体格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置，自动将a标签替换成div，并生成object, embed甚至是iframe代码，至于生成object还是embed，jQuery Media会根据当前平台自动判别，因此兼容性方面非常出色下面这段代码是jQuery Media生成后的。

5.Google Docs PDF viewer

官网：https://docs.google.com/viewer

不多说，这个可以去官网上了解下

6.ZOHO Viewer

官网：https://viewer.zoho.com/home.do

看人品，有时候是能打开的，有时候是不行的

7.Anychart：使用JavaScript导出PDF

官网：https://www.anychart.com/products/stock/online-demos/html-js-samples-center/export-as-pdf-js-call/index.html

上官网查看使用。

8.jQuery Document Viewer

官网：https://codecanyon.net/item/jquery-document-viewer/1732515?ref=bogdan_sandu

上官网查看使用。

二、Word的预览方式
 

WORD 预览方式现在主要有以下几种方式

1.jQuery Media Plugin

官网：https://jquery.malsup.com/media/

她的思想是：将 word 转换成 html，然后借助 jquery.media.js 来实现查看。效果有失真

2.PDFObject

官网：https://pdfobject.com/

上述已经描述，不在复述；可直接调用PDFObject.embed(url); 方法实现预览；效果有失真

3.PDF.JS

官网：https://mozilla.github.com/pdf.js/

上述已经描述，不在复述；效果有失真

除过使用现有的js技术，其他的都是转换成html，然后再直接返回到页面进行浏览

三、集成预览

目前没有特别好的，可以完美实现在线预览word，excel，pdf，ppt的可行性js实现方案，有的更多的是集成软件的形式。

如openoffice ， onlyoffice 等等，但是他们都比较重，需要安装程序，安装完成之后才能进行调用服务进行预览，有一定的限制性在里面；

具体在项目中使用哪种方式，就看决策者的意思了、

目前来看：总的表现最优的，实现功能最强的的，还是onlyoffice，她既可以实现在线预览，又可以实现在线编辑，是一款比较不错的web解决方案选项。

更多干货：请移步微信公众号： 码出精彩 （codingba）