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
怎么支持我?
关注我的公众号,精彩内容不能错过!
WEB中使用viewer.js实现在线浏览Office文档相关推荐
- 使用viewer.js实现在线浏览Office文档
1.跟其他js组件不同,这个必须放在web服务器中才会有效果. 2.支持.odp(ppt,pptx),ops (xls,xlsx), pdf 3. odp vs ppt 主要不同 odp 不支持艺术字 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
http://www.cnblogs.com/wuhuacong/p/3871991.html 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览 在博客园很多文章 ...
- Office Online Server 在线编辑Office文档,安装部署
一.Office Online Server介绍 Office Online Server是 Office Web Apps Server 的升级版本,安装环境必须为两台Windows Server ...
- 在线编辑Office文档软件——WebOffice,常见问答来帮你!
WebOffice控件是国内领先的在线编辑Office文档软件,软件产品从1998年立项至今已有20多年历史,期间服务了众多大中小型企业.各级政府机关.科研机构和学校等事业单位.全新的WebOffic ...
- jsp+java用pageoffice在线编辑office文档
首先你要有三个东西:sealsetup.exe.pageoffice.jar和posetup.exe,如果没有,就去 http://www.zhuozhengsoft.com/download ...
- 如何在谷歌chrome中打开、编辑、保存微软Office文档?
历史背景 在2015年的主流浏览器版本中,因为可以直接调用微软开源的 ActiveX控件,可以实现微软Office软件的在线编辑及审阅功能,但是从2015年开始,各大主流浏览器先后取消了对 NPAPI ...
- 在线编辑office文档笔记
了解到的相关office在线编辑工具 一.weboffice 收费 通过activeX在浏览器上实现,在其他浏览器兼容性比较差:集成了盖章.套红等功能 二.pageoffice 收费(3种收费中功能最 ...
- 如何在线编辑Office文档
Office文档是我们办公中最常用的文件格式之一,它可以通过Microsoft Office应用程序创建和编辑,但前提是需要先将Microsoft Office下载并安装到系统中.如果系统中没有或者无 ...
最新文章
- pandas创建时间序列仿真数据并过滤(filter)时间数据:头尾数据、某年的数据、某年某月的数据、某年某月某日的数据、某个时间范围内的数据、truncate函数查看特定时间之前护着之后的数据
- 人工智能让育种“物美价廉”
- mysql总是出现-_mysql 总是莫名其妙的关闭:报错
-问答-阿里云开发者社区-阿里云...
- java web ee_Java EE 6 Web配置文件。 在云上。 简单。
- ngx_lua 模块提供的指令和API等
- ARM指令ldr、str、stm、ldm理解
- Sublime Merge for Mac(git客户端软件)2064
- pom.xml 导入ojdbc6报错
- 360浏览器通过访问插件管理界面启用flash实例演示,360浏览器启用Adobe Flash Player方法
- 使用PEG估值法简单选股(1)
- html链接打开excel表格,Excel表格中怎么设置超链接的形式打开其他Sheet工作簿
- Python OLS模型
- win怎么在计算机里按日期搜索文件,Windows下怎么按时间查找文件
- 【stm32f429igt6】的WiFi模块数据收发。
- JAVA社交平台项目第七天 JUC多线程
- 视频采集卡二次开发(天敏SDK2500+openCV)
- 《渡月桥 ~君想ふ~》
- springboot大学生社团管理系统的设计与实现毕业设计源码150912
- 解析架设PPPOE服务器的过程
- 《分销商开发、维护与管理》--王越老师
热门文章
- 【TypeScript专题】之类型断言
- 开发AndroidStudio图片压缩插件TinyPngPlus
- 简单的咖啡文化静态HTML网页设计作品 DIV布局咖啡馆文化网页模板代码 DW咖啡网站制作成品
- dw6能编译asp吗_dreamweaver运行asp文件的方法
- android mmi 如何卸载,android mmi可以卸载吗?
- 黑马软件测试Day1 2022.3.23
- javaScript求0-100之间的偶数和与奇数和
- 月亮代表我的心计算机谱子,月亮代表我的心(超简单) C调钢琴谱
- 佳能Canon LBP3910 打印机驱动
- 解决MAC版VMware Fusion启动黑屏