WEB中使用viewer.js实现在线浏览Office文档
1.如何使用ViewerJS
把ViewerJS放在你的网站很容易,花费的时间不会超过5分钟。ViewerJS是一个非常通用的文档查看器,驻留在您的web服务器本身。
运行ViewerJS一样简单的做一个链接。你可以用它来给一个全屏演示,但也显示文档的内联在你的网站或链接文档查看器。因为你的浏览器的方式保护自己免受安全风险(这是一件非常好的事情)ViewerJS只能在文件驻留在自己的服务器上。ViewerJS是完整和独立的,它不依赖于其他服务。
2.语法
使用ViewerJS你不需要改变你想添加的页面文档,激活几乎就像普通链接。通常情况下,当创建一个链接到一个文件在你的网站上你可以使用:
启动ViewerJS我们点浏览器的查看器(如果你遵循指令)驻留在/ ViewerJS / index . html。我们只需要写下/ ViewerJS,浏览器会理解。接下来我们需要做的是告诉浏览器的位置我们想要展示的实际文件。
我们告诉ViewerJS哪里可以找到文档给regularpath / /文件名。ext(即:文档的绝对路径计算的“根目录”网路)如下所示:
在实践中这意味着我们显示到浏览器回到顶级文件夹以# . .(如果你把目录ViewerJS在其他地方,
(因为我们已经在浏览器中使用的常规路径指向它与ViewerJS文件夹,我们使用相对链接之前从该位置#字符。)
就是这样。原则上不需要改变任何东西到“主机”页面。当然你经常想用ViewerJS嵌入文档在页面。为此,我们将使用一个所谓的iframe——只是一个页面在一个web页面。看看他,打开网页的源来看看它是如何工作的。
3.快速使用
以下是所必需的基本步骤把ViewerJS放在你的网站。
一切开始于从网站下载ViewerJS。
解压缩文件在您的计算机上。这将给你一个文件夹叫“ViewerJS”。上传文件夹到你的网络服务器,最好的文件夹。现在,您可以看到ViewerJS行动。
上传一个文件到你的网络服务器(用于演示,我们将使用一个PDF,如果你没有一个使用这个。如果你已经有文件,你可以跳过这一步。
看看文档,你认为它是通过插入地址在浏览器的地址栏。如果你的浏览器提供下载文档,你设置。如果不是,检查如果你有正确的文件的位置。
创建文档的链接,而不是你通常会做(该链接可以在任何地方,只要ViewerJS和文档你想链接到同一网站)。现在是棘手的一部分:我们必须使用上面描述的语法点的文档。
4.嵌入在一个页面
我们需要画一个iframe,然后通过我们之前一样的链接。如果我们有一个文档文件夹/演示/ ohm2013.odp它将看起来像这样:
(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;”
1
如果你想要的位置文档到中间
style=“text-align:center;”
1
就像这样：
本人使用实例
有些童鞋可能没太明白，其实很简单，最简单的demo是下载好插件后放到你的tomcat的webapp下面的ROOT文件夹，启动你的tomcat就可以使用了。如图
这里写图片描述
我在根目录放置了一个pdf文件，那么我要在网页上预览这个文件的话就输入链接：http://localhost:8888/ViewerJS/#../1.pdf
访问效果如图：
这里写图片描述
附上插件下载（不喜勿下勿喷~）：
http://download.csdn.net/download/weixin_35852328/10116795