三种文档在线预览实现方式

方案一采用的技术栈是:OpenOffice +SwfTools + FlexPaper, 这种方案是目前比较成熟的方案,很多网站采用该方案来实现在线预览的功能。这种方案的思路是这样的:

  1. 通过OpenOffice的服务将office文档及文本文档转换为pdf文档。
  2. 通过SwfTools将pdf文档转换为swf文档。
  3. 通过FlexPaper的js框架将swf文档展示到web页面。

流程图:

优缺点分析:

缺点:

  1. 服务器上面需要安装SwfTools来将pdf文件转换为swf文件。
  2. 客户端浏览器需要安装flash插件.

优点:FlexPaper的界面很像pdf阅读器,支持文字放大缩小及搜索等功能。

示例:

Demo:

https://github.com/StoneFeng/DocOnlinePreview1.git

方案二采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是直接将pdf文件通过js框架直接展示到web页面,这样相对于方案一的实现少了一层转换,效率会更快,而且pdf.js由mozilla团队维护,不用担心后期维护问题,客户端浏览器不需要安装pdf阅读器插件,唯一的要求是浏览器必须支持html5。这种方案的实现过程是:

  1. 通过OpenOffice的服务将office文档及文本文档转换为pdf文档。
  2. 通过pdf.js将pdf文件展示到web页面。

流程图:

优缺点分析:

缺点:客户端浏览器必须支持html5

优点:pdf.js渲染出的页面很类似与pdf阅读器,支持文本搜索和字体缩放,支持分页等,用户体验较好。

图例:

Demo:

https://github.com/StoneFeng/DocOnlinePreview2.git

之前的方案无法很好地解决异构平台及不同浏览器的兼容性问题,如方案一需要客户端浏览器支持flash而移动端浏览器无法支持这点,虽然移动端浏览器支持方案二,但是一些老版本的IE浏览器无法支持,例如IE8就不支持html5,在这种情况下决定研究方案三,该方案采用的技术栈是OpenOffice + PDFRenderer + js, 思路是这样的:

  1. 通过OpenOffice的服务将office文档及文本文档转换为pdf文档。
  2. 通过PDFRenderer将pdf文件转换为图片。
  3. 利用js框架将图片展示到web页面。

流程图:

优缺点分析:

缺点:图片转换较慢,图片不支持文字搜索,PDFRenderer转换出来的文字感觉怪怪的。

优点:不用考虑浏览器的兼容性。

图例:

Demo:

https://github.com/StoneFeng/DocOnlinePreview3.git

  • 4
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值