在线文档预览

来源:互联网 发布:甩手掌柜工具箱软件 编辑:程序博客网 时间:2024/05/01 04:25

后端代码已上传但是前端怎么去调用页是个问题。

在网上找了一下解决方案但是还是不行。前端代码

<html>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script><!--需要引入的jquery文件-->
<script src="FlexPaperViewer.swf" type="text/javascript"></script><!--需要引入的FlexPaperViewer flash控件-->
<script src="flexpaper.js" type="text/javascript"></script><!--需要引入的flexpaper.js文件-->
<script src="expressInstall.swf" type="text/javascript"></script><!--这个文件好像可以不需要-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" />
    <style type="text/css" media="screen">
        html, body { height:100%; }
        body { margin:0; padding:0; overflow:auto; }
        #flashContent { display:none; }
    </style>
<body>
<div style="float:left;">
<div id="documentViewer" class="flexpaper_viewer" style="width:1100px;height:800px"></div>




<script type="text/javascript">debugger;
    $('#documentViewer').FlexPaperViewer(
            { config : {
                SWFFile : '1427355162894_53831.swf',<!--需要展示的swf文件,这个在后台要将其转换好这里直接访问地址-->
                Scale : 30,
                ZoomTransition : 'easeOut',
                ZoomTime : 0.5,
                ZoomInterval : 0.2,
                FitPageOnLoad : true,
                FitWidthOnLoad : true,
                FullScreenAsMaxWindow : false,
                ProgressiveLoading : false,
                MinZoomSize : 0.2,
                MaxZoomSize : 5,
                SearchMatchAll : false,
                InitViewMode : 'Portrait',
                RenderingOrder : 'flash',
                StartAtPage : '3',


                ViewModeToolsVisible : true,
                ZoomToolsVisible : true,
                NavToolsVisible : true,
                CursorToolsVisible : true,
                SearchToolsVisible : true,
                WMode : 'window',
                localeChain: 'zh_CN',
                jsDirectory : 'E:/2015-03/'
            }}
    );
</script>


<script type="text/javascript">debugger;
    var url = window.location.href.toString();
    if(location.length==0){
        url = document.URL.toString();
    }


    if(url.indexOf("file:")>=0){
        jQuery('#documentViewer').html("<div style='position:relative;background-color:#ffffff;width:420px;font-family:Verdana;font-size:10pt;left:22%;top:20%;padding: 10px 10px 10px 10px;border-style:solid;border-width:5px;'><img src='http://flexpaper.devaldi.com/resources/warning_icon.gif'>&nbsp;<b>You are trying to use FlexPaper from a local directory.</b><br/><br/> FlexPaper needs to be copied to a web server before the viewer can display its document properlty.<br/><br/>Please copy the FlexPaper files to a web server and access the viewer through a http:// url.</div>");
    }
</script>

</body>
</html>


然后需要修改FlexPaper.js文件里引用FlexPaperViewer.swf文件跟expressInstall.swf文件的路径问题


_SWFFile   = (config.SwfFile!=null?config.SwfFile:_SWFFile);
    _SWFFile   = (config.SWFFile!=null?config.SWFFile:_SWFFile);
    _PDFFile = (config.PDFFile!=null?config.PDFFile:_PDFFile);
    _IMGFiles = (config.IMGFiles!=null?config.IMGFiles:_IMGFiles);
    _IMGFiles = (config.PageImagePattern!=null?config.PageImagePattern:_IMGFiles);
    _JSONFile = (config.JSONFile!=null?config.JSONFile:_JSONFile);
    _jsDirectory = (config.jsDirectory!=null?config.jsDirectory:"js/");////////////////////文件存放地址
    _cssDirectory = (config.cssDirectory!=null?config.cssDirectory:"css/");///////////////////文件存放地址
    _localeDirectory = (config.localeDirectory!=null?config.localeDirectory:"locale/");
    if(_SWFFile!=null && _SWFFile.indexOf("{" )==0 && _SWFFile.indexOf("[*," ) > 0 && _SWFFile.indexOf("]" ) > 0){_SWFFile = escape(_SWFFile);} // split file fix


    window[instance] = flashembed(id, {
        src    : "FlexPaperViewer.swf",//////这里是我修改过后的地址,之前为_jsDirectory/FlexPaperViewer.swf
        version    : [10, 0],
        expressInstall    : "expressinstall.swf",//////这里是我修改过后的地址,之前为_jsDirectory/expressinstall.swf
        wmode    : _WMode
    },{……………………………………

这样修改过后你的前端就可以出现flex控件了。

0 0