怎么实现前端HTML页面在线预览服务器传来的PDF和Word文件

html-css06

怎么实现前端HTML页面在线预览服务器传来的PDF和Word文件,第1张

可以使用flash插件载入,

或者使用比较成熟的h5的js插件https://github.com/mozilla/

要么直接使用第三方api http://www.officeweb365.com/

api是要简单一点但是推荐用h5的插件

HTML中实现Word/Excel/PDF/PPT等文件的在线预览,除PDF外,其他格式文件需借助iframe标签及微软officeOnline提供的API来实现在线预览

注:你的文件地址必须是公开可访问的!

目前找到的几种方式:

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直接在浏览器输出,类似现在的百度文库。

优点:浏览器无需安装任何插件,也不用担心兼容性问题,还支持移动端。

缺点:可能会丢失格式,而且用户可以直接拷贝文档内容,如果是扣积分下载的话,可能达不到目的。