Web开发中的文档在线预览解决方案，支持多种文件格式

什么会写这篇文章？

在我们平时的开发中，会遇到用户提的各种需求，其中有一些还是不得不实现的，常见的就有文档在线预览功能，这是一个用户提出来还不好反驳的功能需求，在用户看来，这是一个在正常不过的需求，因此今天就介绍三个文档在线预览或者编辑（本质上是两种）的解决方案，希望通过本文能帮助到大家解决这样类似的需求，而且是免费的。

常见的文档预览格式要求

一般情况下，用户所要求预览的文档莫过于Office系列的或者PDF或者图片，后两者其实很简单，一般不需要费多大力气就能完美解决，基本上可以说浏览器自身就已经满足这个需求了，但是看似普通的office文档想要在线预览，特别是可能还想编辑，这样的需求可能就不是那么容易就解决了，特别上网上有很多收费的解决方案，价格较高，而且可能我们并不需要那么强大的功能，因此就会去找一些替代方案来节省成本，下面我会依次介绍这三种方案。

微软免费提供在线版本office预览

这种方式相对于后面两种方案是最简单的，这种方案的想法是来源于网易邮箱的在线预览文档功能，微软提供了免费的预览服务：

https://view.officeapps.live.com/op/view.aspx?src=你的文档地址

这种方式的好处显而易见，你什么都不需要做，只需要提供文档的地址就行，当然这也是有前提的，貌似是你的文档地址必须要是域名形式而且不带端口号的，也就是说这种方案只能满足文档机密性较低，而且满足上面提到的条件才行。

截图预览：

文章第一张图就是Excel文档的预览效果截图

PPT在线预览效果：

Word在线预览效果：

从预览效果来看和在Office打开无二，是一个非常不错的选择，图片或者PDF就不要使用这个了，还是用浏览器自带的吧！

自部署Office Online Server

这种方案适合大多数情况，我本人也推荐使用这种方式，因为可控性比较高，实际上就是将第一种方式搬到自己本地。部署在自己的服务器上的，本文并不讨论具体如何安装，因为其安装相对复杂，对环境要求比较高，这就是它的缺点。微软自身提供了安装教程，网络上也有很多类似的相关介绍，其使用效果和之前的截图类似，不过如果是自己部署的话是可以实现编辑功能的。

get地址

直接搜索“msdn 我告诉你”，除非是有广告，不然应该第一个就是，然后到服务器菜单下
找到它，如下图

然后你就可以去找相关教程了，以下是微软官网的教程，大多数情况你可能还需要各种搜索

https://docs.microsoft.com/zh-cn/OfficeOnlineServer/office-online-server-overview

虚拟机安装

如果你觉得上面的方法比较复杂，或者说想先自己尝试下，那么你也可以使用下面的方案，以下方案是在收集资料的时候发现的，笔者并未有相关的环境进行测试，感兴趣的网友可以移步到以下地址查看，同时感谢网络上热爱分享的同志们

https://www.jianshu.com/p/c67d103484a4

开源的文档在线预览方案 kkFileView

这是国人开源的项目，支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore等文件在线预览，可以说很全面了，而且部署相对简单，具体如何部署可以到开源地址：

https://gitee.com/kekingcn/file-online-preview

效果预览，分别是word、图片和压缩文件

从预览效果上可能比不上Office Online，但是它支持的格式多，而且是开源的，主要使用spring boot，可以部署在windows、linux或者MacOS上，在windows上部署相对简单一些，最主要的还支持移动端预览!

总结

以上是我认为基本能够满足大多人需求的解决方案了，你可以针对自己的项目选择适合自己项目的方案，希望能够通过本文的介绍给大家带来一些思路，方案很多，要找到一个适合的才是最重要的！

、前端实现pdf文件在线预览功能

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

<a href="文档地址"></a>

方式二、通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。实现方式： js代码：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
复制代码

html结构：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
复制代码

调用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
复制代码

方式三、直接通过页面内嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
复制代码

此外还可以在iframe标签之间提供一个提示类似这样

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
复制代码

方式四、通过标签嵌入内容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

方式五、标签和iframe使用差别较小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
复制代码

除方式二以外其他都是直接通过标签将内容引入页面实现预览

方式六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到网页
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href="/canvas";
 }
</script>
</html>

还可以通过以下代码进行判断是否支持PDFObject预览

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
复制代码

方式七、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

2、word、xls、ppt文件在线预览功能

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
复制代码

src就是要实现预览的文件地址具体文档看这微软接口文档

补充：google的文档在线预览实现同微软（资源必须是公共可访问的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
复制代码

3、word文件

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>
复制代码

4、excel文件

目前excel文件已经有了类似pdf.js那样的解析sheet.js

总结：

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）

2、利用后端将文件转为图片，前端以图片形式预览（可行方案）

3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

著名：文章内容是从网上搜集资料所得；在次发表只为自己以及头条程序员兄弟日后使用图个方便。

觉得有用记得收藏转发！

什么会写这篇文章？

常见的文档预览格式要求

微软免费提供在线版本office预览

这种方式相对于后面两种方案是最简单的，这种方案的想法是来源于网易邮箱的在线预览文档功能，微软提供了免费的预览服务：

https://view.officeapps.live.com/op/view.aspx?src=你的文档地址

截图预览：

文章第一张图就是Excel文档的预览效果截图

PPT在线预览效果：

Word在线预览效果：

从预览效果来看和在Office打开无二，是一个非常不错的选择，图片或者PDF就不要使用这个了，还是用浏览器自带的吧！

自部署Office Online Server

get地址

直接搜索“msdn 我告诉你”，除非是有广告，不然应该第一个就是，然后到服务器菜单下
找到它，如下图

然后你就可以去找相关教程了，以下是微软官网的教程，大多数情况你可能还需要各种搜索

https://docs.microsoft.com/zh-cn/OfficeOnlineServer/office-online-server-overview

虚拟机安装

https://www.jianshu.com/p/c67d103484a4

开源的文档在线预览方案 kkFileView

https://gitee.com/kekingcn/file-online-preview

效果预览，分别是word、图片和压缩文件

总结

在线咨询

上一篇：导航菜单根据选中的元素动态让当前元素靠中显示的方法
下一篇：20、描述一下 HTTP 的请求过程与原理（高薪常问

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web开发中的文档在线预览解决方案，支持多种文件格式

什么会写这篇文章？

常见的文档预览格式要求

微软免费提供在线版本office预览

自部署Office Online Server

开源的文档在线预览方案 kkFileView

总结

、前端实现pdf文件在线预览功能

2、word、xls、ppt文件在线预览功能

什么会写这篇文章？

常见的文档预览格式要求

微软免费提供在线版本office预览

自部署Office Online Server

开源的文档在线预览方案 kkFileView

总结

您的项目需求