WEB中使用viewer.js实现在线浏览Office文档

1.如何使用ViewerJS
把ViewerJS放在你的网站很容易,花费的时间不会超过5分钟。ViewerJS是一个非常通用的文档查看器,驻留在您的web服务器本身。
运行ViewerJS一样简单的做一个链接。你可以用它来给一个全屏演示,但也显示文档的内联在你的网站或链接文档查看器。因为你的浏览器的方式保护自己免受安全风险(这是一件非常好的事情)ViewerJS只能在文件驻留在自己的服务器上。ViewerJS是完整和独立的,它不依赖于其他服务。

2.语法
使用ViewerJS你不需要改变你想添加的页面文档,激活几乎就像普通链接。通常情况下,当创建一个链接到一个文件在你的网站上你可以使用:

<a href="/path/to/filename.ext">

启动ViewerJS我们点浏览器的查看器(如果你遵循指令)驻留在/ ViewerJS / index . html。我们只需要写下/ ViewerJS,浏览器会理解。接下来我们需要做的是告诉浏览器的位置我们想要展示的实际文件。
我们告诉ViewerJS哪里可以找到文档给regularpath / /文件名。ext(即:文档的绝对路径计算的“根目录”网路)如下所示:
在实践中这意味着我们显示到浏览器回到顶级文件夹以# . .(如果你把目录ViewerJS在其他地方,

<a href="/ViewerJS/#../path/to/filename.ext">

(因为我们已经在浏览器中使用的常规路径指向它与ViewerJS文件夹,我们使用相对链接之前从该位置#字符。)
就是这样。原则上不需要改变任何东西到“主机”页面。当然你经常想用ViewerJS嵌入文档在页面。为此,我们将使用一个所谓的iframe——只是一个页面在一个web页面。看看他,打开网页的源来看看它是如何工作的。

3.快速使用
以下是所必需的基本步骤把ViewerJS放在你的网站。
一切开始于从网站下载ViewerJS。
解压缩文件在您的计算机上。这将给你一个文件夹叫“ViewerJS”。上传文件夹到你的网络服务器,最好的文件夹。现在,您可以看到ViewerJS行动。
上传一个文件到你的网络服务器(用于演示,我们将使用一个PDF,如果你没有一个使用这个。如果你已经有文件,你可以跳过这一步。
看看文档,你认为它是通过插入地址在浏览器的地址栏。如果你的浏览器提供下载文档,你设置。如果不是,检查如果你有正确的文件的位置。
创建文档的链接,而不是你通常会做(该链接可以在任何地方,只要ViewerJS和文档你想链接到同一网站)。现在是棘手的一部分:我们必须使用上面描述的语法点的文档。

<a href="/ViewerJS/#../path/to/filename.ext">

(如果你愿意,你可以试着看看ViewerJS正确安装了浏览器的地址栏,和插入/ ViewerJS / # . .中间写上你的网站的域名部分(下图是example.org)和其他的路径:

<a href="http://example.org/ViewerJS/#../path/to/filename.ext">

如果这工作,你也可以复制该URI。

4.嵌入在一个页面
我们需要画一个iframe,然后通过我们之前一样的链接。如果我们有一个文档文件夹/演示/ ohm2013.odp它将看起来像这样:

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

注意,您需要设置iframe的宽度和高度在你的页面。ViewerJS将尝试使用所有空间你给它,但如果你想优化利用屏幕房地产确保您适合的窗户ViewerJS文档的尺寸你想表演。如果你不知道要做什么,只是尝试一下不同的格式。
常见的格式:

(A4 sized documents - portrait) (1.414 : 1)

width='724' height='1024'
width='566' height='800'
width='389' height='550'
width='297' height='210'
(A4 sized documents - landscape) (1 : 1.414 )

width='1024' height='724'
width='800' height='566'
width='550' height='389'
width='210' height='297'
(screen sized documents) (4 : 3)

width='1024' height='768'
width='800' height='600'
width='600' height='450'

如果你想要的位置文档到左边或者右边

style="float:left;" or style="float:right;"

如果你想要的位置文档到中间

style="text-align:center;"

就像这样：

<iframe style="float:right;" src = "/ViewerJS/#../demo/ohm2013.odp" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

使用ViewerJS注意事项
1.ViewerJS放置的位置必须是web容器下面 并要是一个独立的工程。
2.#../ 代表的是当前web容器的ROOT目录。
3./ViewerJS/http://localhost:8080/demo/ohm2013.odp 通过这种方式可以访问外部的office文件。
4.只能打开PDF/ODS/ODT..等开源office格式。

本人使用实例

有些童鞋可能没太明白，其实很简单，最简单的demo是下载好插件后放到你的tomcat的webapp下面的ROOT文件夹，启动你的tomcat就可以使用了。如图

我在根目录放置了一个pdf文件，那么我要在网页上预览这个文件的话就输入链接：http://localhost:8888/ViewerJS/#../1.pdf
访问效果如图：

附上插件下载（不喜勿下勿喷~）：
http://download.csdn.net/download/weixin_35852328/10116795

怎么支持我？

关注我的公众号,精彩内容不能错过！