沃梦达 / IT编程 / 前端开发 / 正文

pdf2swf+flexpapers实现类似百度文库pdf在线阅读

PDF2SWF是一个将PDF文件转换为SWF文件的开源工具,FlexPaper 是一个基于 Flash 的开源文档阅读器。联合使用这两个工具可以用来实现类似百度文库 PDF 在线阅读的效果。

PDF2SWF是一个将PDF文件转换为SWF文件的开源工具,FlexPaper 是一个基于 Flash 的开源文档阅读器。联合使用这两个工具可以用来实现类似百度文库 PDF 在线阅读的效果。

下面是实现该过程的完整攻略:

步骤1:安装和配置软件

  1. 安装 PDF2SWF。PDF2SWF 可以从http://www.swftools.org/download.html 官方网站下载。

  2. 安装 FlexPaper。FlexPaper 可以从 https://github.com/FlexPaper/flexpaper 下载。

  3. 添加 PDF2SWF 到系统环境变量中。查看环境变量,将 PDF2SWF 所在的路径添加到 PATH 环境变量中即可。

  4. 复制 FlexPaperViewer.swf 文件到项目的根目录下。

步骤2:将 PDF 文件转换成 SWF 文件

使用 PDF2SWF 将 PDF 文件转换为 SWF 文件。命令的格式为:

pdf2swf input.pdf -o output.swf -f -T 9

其中 input.pdf 是要转换的 PDF 文件的路径,output.swf 是输出文件的路径。-f 表示绑定全部字体,-T 9 表示 Flash 版本号。

步骤3:引入 FlexPaper

  1. 添加以下代码到 HTML 文件的 head 标签中:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/flexpaper_flash.js"></script>
  1. 添加以下代码到 HTML 文件中:
<div id="documentViewer" style="width:100%;height:100%"></div>
<script type="text/javascript">
        $(document).ready(function(){
            $("#documentViewer").FlexPaperViewer({
                Config : {
                    SWFFile : "output.swf",
                    Scale : 0.8,
                    ZoomTransition : 'easeOut',
                    ZoomTime : 0.5,
                    ZoomInterval : 0.2,
                    FitPageOnLoad : true,
                    FitWidthOnLoad : false,
                    FullScreenAsMaxWindow : false,
                    ProgressiveLoading : false,
                    MinZoomSize : 0.2,
                    MaxZoomSize : 5,
                    SearchMatchAll : false,
                    InitViewMode : 'Portrait',
                    PrintEnabled : false,
                    PrintAllEnabled : true,
                    MouseWheelZoom : true,
                    EnableSearchMode : false,
                    UIConfig : {
                        'toolbar': {
                            'printButton':false
                        }
                    }
                }
            });
        });
</script>

示例1: 将 PDF 转换成 SWF 文件

假设我们有一个名为“example.pdf”的 PDF 文件,我们使用以下命令将其转换成 SWF 文件:

pdf2swf example.pdf -o example.swf -f -T 9

示例2: 实现在线 PDF 阅读器

我们将上述步骤1和步骤3的代码实现到一个 HTML 文件中,来实现在线 PDF 阅读器。并将 PDF 文件放在与 HTML 文件同一文件夹下,并将文件名改为“output.swf”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Online PDF Reader</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/flexpaper_flash.js"></script>
</head>
<body>
    <div id="documentViewer" style="width:100%;height:100%"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#documentViewer").FlexPaperViewer({
                Config : {
                    SWFFile : "output.swf",
                    Scale : 0.8,
                    ZoomTransition : 'easeOut',
                    ZoomTime : 0.5,
                    ZoomInterval : 0.2,
                    FitPageOnLoad : true,
                    FitWidthOnLoad : false,
                    FullScreenAsMaxWindow : false,
                    ProgressiveLoading : false,
                    MinZoomSize : 0.2,
                    MaxZoomSize : 5,
                    SearchMatchAll : false,
                    InitViewMode : 'Portrait',
                    PrintEnabled : false,
                    PrintAllEnabled : true,
                    MouseWheelZoom : true,
                    EnableSearchMode : false,
                    UIConfig : {
                        'toolbar': {
                            'printButton':false
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

当我们用浏览器打开该 HTML 文件时,就可以在线浏览 PDF 文件。

本文标题为:pdf2swf+flexpapers实现类似百度文库pdf在线阅读