让你的PDF像百度文库一样在线预览

时间：2014-11-01 01:06:28 阅读：320 评论：0 收藏：0 [点我收藏+]

上次写过一篇博客《巧用数据流让 Word 文档在线阅读》，其原理，主要就是把Word转成Html格式，然后通过数据流读取，并显示出来！发现一个问题，Word中有图片该怎么办？我们其实经常使用这样的工具，像豆丁网、百度文库等，他们是如何实现的呢？
office文档在线预览大致有两种形式：
1）使用Microsoft的Office组件将文件直接转换为html文件（优点：代码实现最简单，工作强度最小。缺点：效果极差），也就是上篇博客的效果。
2）使用Microsoft的Office组件将文件转换为PDF格式文件，再使用插件转换为swf文件，然后flash文件通过另一个插件展示出来（优点：预览效果能接受，缺点：代码量大）。百度文库就是基于这种思路。

将office文件转换为PDF格式文件，这个功能还未实现，一直报错。这篇博客暂且讲PDF的在线阅读吧，也就是使用把PDF文档转换为swf文件，然后使用再展示出来。

一、工具准备（工具我已经共享到百度云了，链接地址在文章末端）：
Pdf2swf：用于的把PDF格式文件，转换为swf文件

Flexpaper：这是一个flash播放器，它可以播放一帧一页的flash。

二、代码实现
1、Flexpaper的用法
我们可以查看下载的Flexpape文件夹中index.html源代码，这里不多说，直接看它的用法吧:
在前端的用法如下：

<!--首先要引入jquery库及相关的js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/flexpaper_flash.js"></script>
<script type="text/javascript" src="js/flexpaper_flash_debug.js"></script>

html中的代码,只需声明一个a标签即可

<div style="position: absolute; left: 20px; top: 20px;">
    <a id="viewerPlaceHolder" style="width: 600px; height: 800px; display: block;"></a>
    <!--设置一个隐蔽控件来得到要显示的文件的名字-->
    <input type="hidden" id="file" value='<%=FileURL %>' />
    <script type="text/javascript">

        var fileURL = $("#file").val();
        var fp = new FlexPaperViewer(
    'FlexPaper/FlexPaperViewer',
    'viewerPlaceHolder',
    {
        config: {
            SwfFile: escape('TestSWF/' + fileURL),
            Scale: 0.6,
            ZoomTransition: 'easeOut',
            ZoomTime: 0.5,
            ZoomInterval: 0.2,
            FitPageOnLoad: false,
            FitWidthOnLoad: false,
            PrintEnabled: true,
            FullScreenAsMaxWindow: false,
            ProgressiveLoading: false,
            MinZoomSize: 0.2,
            MaxZoomSize: 5,
            SearchMatchAll: false,
            InitViewMode: 'Portrait',
            ViewModeToolsVisible: true,
            ZoomToolsVisible: true,
            NavToolsVisible: true,
            CursorToolsVisible: true,
            SearchToolsVisible: true,
            localeChain: 'en_US'
        }
    }
    );
    </script>
</div>

这样一来，基本上就可以在前端显示你的Flexpaper了.

2.调用pdf2swf.exe把PDF转换为SWF的用法
代码如下：

private static void ConvertCmd(string fileName)
{             
    using (Process p = new Process())
    {
        string cmdStr = HttpContext.Current.Server.MapPath("~/SWFTools/pdf2swf.exe");
        string savePath = HttpContext.Current.Server.MapPath("~/TestSWF/");
        // @"""" 相当于一个双引号，之所以要加@"""" 就是为了防止要转换的过程中，文件夹名字带有空格，导致失败
        string sourcePath = @"""" + savePath + fileName + @"""";
        string targetPath = @"""" + savePath + fileName.Substring(0, fileName.LastIndexOf(".")) + ".swf" + @"""";
        string argsStr = "  -t " + sourcePath + " -s flashversion=9 -o " + targetPath;
        //调用新进程 进行转换
        ProcessStartInfo psi = new ProcessStartInfo(cmdStr, argsStr);
        p.StartInfo = psi;
        p.Start();
        p.WaitForExit();
    }
}

其中，我把pdf文件存放在~/TextSWF/文件夹下，转换后的swf也是存放在同一文件夹下了。按照以上的做法，应该没什么问题，就可以做出类似于百度文库的效果了。

三、最后看一下效果：

bubuko.com,布布扣