首页 > 编程知识 正文

文件在线预览控件,实现文件预览

时间:2023-05-04 06:04:22 阅读:266310 作者:1022

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

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

流程图:

优缺点分析:

缺点:

服务器上面需要安装SwfTools来将pdf文件转换为swf文件。客户端浏览器需要安装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。这种方案的实现过程是:

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

流程图:

优缺点分析:

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

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

图例:

Demo:

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

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

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

流程图:

优缺点分析:

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

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

图例:

Demo:

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。