1.有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档
目前找到的几种方式:
1.像以前的百度文库那样,先转换成flash,然后放在网页上。
说明:使用软件OpenOffice/LibreOffice,swftools。
优点:在国内,由于Flash安装量很大,而且很多人用IE和Chrome内核的浏览器,所以是可以查看的。
缺点:OpenOffice/LibreOffice转换的结果可能会丢失格式/排版(我没试过所以不知道会不会),而且比较耗服务器资源,如果浏览器没装Flash就没法查看文档了,尤其是移动端。
2.转换成PDF,然后用Mozilla的pdf.js查看。
说明:转换成PDF的方法可以用OpenOffice/LibreOffice,也可以用七牛的第三方服务“文档转换”(由亿方云提供)。
优点:如果是把文件存放在七牛云,用在线的服务会比较有保障,加载速度也快。
缺点:收费,不过费用很低廉,pdf.js可能比较大,加载相对慢点,放到七牛上面会好些,对移动端支持不好。
3.转换成HTML,像现在的百度文库那样。
说明:使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出,类似现在的百度文库。
优点:浏览器无需安装任何插件,也不用担心兼容性问题,还支持移动端。
缺点:可能会丢失格式,而且用户可以直接拷贝文档内容,如果是扣积分下载的话,可能达不到目的。
2.用html5如何开发网页word,ppt
初次接触移动端,绝对单位的使用自己接触移动端开发是在2012年,那时候比较新潮的是制作WEB APP。
什么是WEB APP呢?所谓的WEB APP就是用网页模拟出原生语言(如iOS)开发的APP交互效果。虽然在表现层面上,HTML5表现突出,但不得不承认的是,在系统性能层面,WEB APP明显要差于原生应用(即Native APP)。
这也就使得WEB APP这条路暂时性的被堵住了。于是,移动端的开发方向逐渐向移动端网页倾斜。
对于PC端,我们一直使用的是px(像素)进行代码的书写,但是到了移动端,需要面临不同的分辨率。在2012年的时候,自己和团队成员在写移动端的时候,由于是初次接触,还是在使用px(像素)作为单位。
因为在2012年的时候,绝大多数的手机的屏幕大小都是320*480分辨率,所以,即便是使用像素作为单位进行移动端网页开发也是完全可以的。关于视口的知识,可点击查看——移动端H5知识-视口viewport横向百分比,纵向像素值随着移动端的继续发展,在2012年9月,iPhone5上市,开始引领“特殊分辨率”的发展,于是,320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少,各种各样的分辨率如雨后春笋般冒了出来。
此时我们再进行固定像素进行开发明显是不明智的。于是,我们开始采用百分比(相对度量单位)进行盒模型横向属性(width、左右内边距、左右外边距)的制作,使用em(相对度量单位)实现文字的处理。
但盒模型纵向上还是使用固定像素作为单位。但是,这种操作导致了一个问题——主要表现在img标签的处理上。
对于图片来说,只需要设置横向百分比,纵向会自动等比例缩放。在列表页以及内容页还好,毕竟内容是自动撑开父级高度的;但是在首页或者二级页,但凡涉及到父级元素高度固定的盒模型,里面的img就会出现变形(压缩或者拉伸)的问题。
这个问题也是困扰了自己许久,但是一直没有找到一个非常好的解决办法。响应式布局当自己还在纠结img的处理时,2013年,在北京流行起了一种新的技术——响应式布局。
通过媒体查询,针对不同大小分辨率的设备,设置不同的样式。应该说,对移动端页面的开发帮助不大,原因在于,响应式的出现主要是因为我们希望一段代码能够同时适配PC端、平板电脑以及手机。
由于三种平台的样式以及用户体验应该是迥然不同的,那么此时,我们就需要有“断点”,在不同位置,有不同的样式,而在两个“断点”之间的样式,则使用相对单位做“渐变性的过渡”。应该说,响应式布局解决了典型的屏幕像素不同样式的问题,但是却依旧搞定不了之前的那个问题。
关于CSS3媒体查询的知识,可点击查看——移动端H5知识-CSS3媒体查询横向纵向均百分比在横向百分比,纵向像素值的方法无效时,自己能够想到的就是纵向也设置为百分比了,但是却发现,盒模型属性在纵向上的一些设置上是存在问题的,如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并不是按照当前元素高度计算的。
于是,横纵向均设置为百分比的方法就破灭了~关于盒模型的一些问题以及背景的合理使用,可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用横向纵向rem随着HTML5的发展,除了原来的em单位,又新增了rem单位。这两个单位都是相对单位。
1em表示的是当前元素一个字体大小的尺寸;而1rem,也表示的是一个字体大小的尺寸,但是是针对html标签进行计算的。相比之下,rem的计算起来要简单很多。
于是,自己尝试用rem解决横向以及纵向的设置,舍弃掉了百分比,发现还是挺不错的,算是兼容了绝大多数机型和浏览器。之后,在使用一款华为手机进行测试的时候,发现并不支持横向的rem。
于是,又需要想办法啦~~~正解 —— 横向百分比,纵向rem针对华为手机,我尝试了横向百分比,发现还是能够支持的,于是就折中了一下,横向使用百分比进行控制,纵向使用rem作为单位。此时能够实现所有浏览器的兼容。
优化正解 —— 横向百分比,纵向rem在横向使用百分比,纵向使用rem时,会由于计算产生一定的误差,于是,运用学习过的一些HTML5技术,进行移动端页面的优化,例如,使用CSS3的盒阴影替换掉边框。而对于rem,在计算中通常是存在一定的字体误差的(会计算出小数点),此时正好接触了一下淘宝的移动端页面,看到了一个不错的JS框架——flexible.js,通过这个框架对页面进行处理,能够防止小数点的出现。
关于flexible.js框架的具体用法,可点击查看——移动端H5知识-处理rem小数点 flexible.js优化正解2 —— 任性的使用固定像素来实现上个月月初,发现网易移动端的制作方法有些特殊,查看代码时发现,网易采用了固定像素进行书写,而通过MetaHandler.js进行了页面的控制。最近尝试了一下,感觉还是挺不错的,兼容也是比较好的,不失为一种好方法。
3.本地站点上的html文档直接打开本地站点上的word文档而不是下载,
web页面无法支持预览office文档,但是却可以预览PDF、flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入PDF文档)进行查看。
Aspose 后台转换可以使用Aspose将office文档转换为PDF格式,Aspose功能强大,支持编辑/转换word、excel、ppt、pdf等,且API操作简便快速。Aspose是收费的,你需要下载破解版本。
除了Aspose可以编辑文档,类似的还有NPOI 、POI等。 1、利用flexPaper预览swf文件,百度文库就是这种方式 由于现在flash插件用得已经很少,此处不再赘述,详细请看这里 2、pdfjs pdfjs是firefox浏览器内置的pdf预览插件,由于是开源的,我们也可以使用它,ie版本只支持ie9/ie9+。
它通过将pdf转换为html元素再添加一些css3的样式达到pdf的预览效果,文档样式与原文档几乎没有太大区别。 3、在页面中嵌入多媒体对象(PDF、flash、video等) 缺点是不同的浏览器支持及呈现不一致,比如pdf目前只有webkit浏览器原生支持嵌入,而且移动端的webkit浏览器也是不支持的。
PDF嵌入可以采用已封住好操作的插件PDFObject,也可以通过浏览器API自行编写。 另外,个人建议可以用md(markdown,拥有类似word文档的操作,可在线修改、预览,前后台数据调用非常方便)文件来保存在线预览的文档,不要用office类的文件格式保存,关于markdown的用法可参考其官网:网页链接。
4.javaweb 在线预览word如何实现
你是什么地方用,一般这个实在服务端实现,把word转成html,图片,或者swf来在浏览器查看。相对而言转成html的效果最好。
目前市面上已经有几个服务商在做,有的是基于openoffice做转换的,但是效果并不是很好,毕竟openoffice本身就很一般;还有的使用微软Office做转换,效果要好很多,但是毕竟核心转换技术是微软的,所以受制于人。
还有就是自行研发转换功能,不过这个一般企业根本做不到,国内也就金山和永中有这个实力,金山并没有这种产品,永中倒是有,效果也很不错,你可以度娘搜永中dcs,到他们网站看看,像腾讯邮箱,还有新华社,大型银行都在用,如果是个人用户,他们有免费的公有云版本,云转换,阿里巴巴用的就是这个,可以直接调用接口转换,免费使用。
网页链接
转载请注明出处51数据库 » html5在线预览word