当前位置: 老葡京网站娱乐 > web开发 > Flex教程 > 正文

FlexPaper+SWFTool+操作类=在线预览PDF

时间:2015-02-03

老葡京网站娱乐 www.sdguanhua.com 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swftool配合使用,在程序运行时将pdf文件转换为swf格式的文件。

如果flexpaper不满足你的要求,也可以对其进行二次开发,这里推荐两篇文章,希望对您有所帮助:

http://www.cnblogs.com/xcong/archive/2013/06/20/3142155.html

http://www.cnblogs.com/zamlove/archive/2013/05/07/3065079.html

如何使用flexpaper

测试demo项目结构如图

使用的页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <style type="text/css" media="screen">
        html, body {
            height: 100%;
        }
    
        body {
            margin: 0;
            padding: 0;
            overflow: auto;
        }
    
        #flashContent {
            display: none;
        }
    </style>
    <!--首先引入相关的js文件-->
    <script type="text/javascript" src="js/swfobject/swfobject.js"></script>
    <script type="text/javascript" src="js/flexpaper_flash.js"></script>
    <!--配置-->
    <script type="text/javascript">
        <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
        var swfVersionStr = "10.0.0";
        <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
        var xiSwfUrlStr = "playerProductInstall.swf";
    
        var flashvars = {
            SwfFile: escape("Paper.swf"),
            Scale: 0.6,
            ZoomTransition: "easeOut",
            ZoomTime: 0.5,
            ZoomInterval: 0.1,
            FitPageOnLoad: false,
            FitWidthOnLoad: true,
            PrintEnabled: true,
            FullScreenAsMaxWindow: false,
            ProgressiveLoading: true,
            PrintToolsVisible: true,
            ViewModeToolsVisible: true,
            ZoomToolsVisible: true,
            FullScreenVisible: true,
            NavToolsVisible: true,
            CursorToolsVisible: true,
            SearchToolsVisible: true,
            localeChain: "en_US"
        };
        var params = {
        }
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        var attributes = {};
        attributes.id = "FlexPaperViewer";
        attributes.name = "FlexPaperViewer";
        swfobject.embedSWF(
            "FlexPaperViewer.swf", "flashContent",
            "650", "500",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);
        swfobject.createCSS("#flashContent", "display:block;text-align:left;");
    </script>
    
</head>
<body>
    <div style="position:absolute;left:10px;top:10px;">
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                10.0.0 or greater is installed.
            </p>
            <script type="text/javascript">
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
                document.write("<a ><img src='"
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player'  /></a>");
            </script>
        </div>
        <div id="errNoDocument" style="padding-top:10px;">
            Can't see the document? Running FlexPaper from your local directory? Make sure you have added FlexPaper as trusted. You can do that at <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065">Adobe's website</a>.
        </div>
    </div>
</body>
</html>