FlexPaper显示swf文件示例和参数设置

版本:2.2.1

示例:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>  
    <title>Flexpaper例子</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      
    <script type="text/javascript" src="${ctx}/FlexPaper/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/FlexPaper/js/flexpaper.js"></script>
    <script type="text/javascript" src="${ctx}/FlexPaper/js/flexpaper_handlers.js"></script>
</head>
<body> 
<div id="documentViewer" class="flexpaper_viewer"
     style="position:absolute;left:10px;top:10px;width:80%;height:80%"></div>
<script type="text/javascript">
    function getContentPath() {
        var pathName = document.location.pathname;
        var index = pathName.substr(1).indexOf("/");
        var path = pathName.substr(0, index + 1);
        return path;
    }
    var fp = $('#documentViewer').FlexPaperViewer(
            {config: {
                SwfFile: getContentPath() + '/readme.swf',
                Scale: 0.6,
                ZoomTransition: 'easeOut',
                ZoomTime: 0.5,
                ZoomInterval: 0.2,
                FitPageOnLoad: true,
                FitWidthOnLoad: true,
                FullScreenAsMaxWindow: true,
                ProgressiveLoading: true,
                MinZoomSize: 0.2,
                MaxZoomSize: 5,
                SearchMatchAll: false,
                InitViewMode: 'Portrait',
                ViewModeToolsVisible: true,
                ZoomToolsVisible: true,
                NavToolsVisible: true,
                CursorToolsVisible: true,
                SearchToolsVisible: true,
                localeChain: 'zh_CN',
                jsDirectory: getContentPath() + "/FlexPaper/js/", /*设置FlexPaper的js文件目录,包含FlexPaperVier.swf文件,否则默认在flex目录下.*/
                cssDirectory: getContentPath() + "/FlexPaper/css/"
            }}
    );
</script>
  
</body>
</html>
如果不能显示,注意设置 jsDirectory和 cssDirectory参数。

官网所给出的详细参数:

Parameters

The following parameters can be used in FlexPaper

  SwfFile (String)The flash document FlexPaper should open
  JSONFile (String)The json document FlexPaper should open. Mark the page number with {page} if you are loading FlexPaper in split mode (e.g. Paper.pdf_{page}.js). This only applies to FlexPaper with AdaptiveUI enabled.
  IMGFiles (String)The pages as images FlexPaper should open. Mark page number with {page} (e.g. Paper.pdf_{page}.png}). This only applies to FlexPaper with AdaptiveUI enabled.
  Scale (Number)The initial zoom factor that should be used. Should be a number above 0 (1=100%)
  ZoomTransition (String)The zoom transition that should be used when zooming in FlexPaper. It uses the same Transition modes as the Tweener. The default value is easeOut. Some examples: easenone, easeout, linear, easeoutquad
  ZoomTime (Number)The time it should take for the zoom to reach the new zoom factor. Should be 0 or greater.
  ZoomInterval (Number)The interval which the zoom slider should be using. Basically how big the "step" should be between each zoom factor. The default value is 0.1. Should be a positive number.
  FitPageOnLoad (Boolean)Fits the page on initial load. Same effect as using the fit-page button in the toolbar.
  FitWidthOnLoad(Boolean)Fits the width on initial load. Same effect as using the fit-width button in the toolbar.
  localeChain (String)Sets the locale (language) to use. The following languages are currently supported:

en_US (English) 
fr_FR (French) 
zh_CN (Chinese, Simple) 
es_ES (Spanish) 
pt_BR (Brazilian Portugese) 
ru_RU (Russian) 
fi_FN (Finnish) 
de_DE (German) 
nl_NL (Netherlands) 
tr_TR (Turkish) 
se_SE (Swedish) 
pt_PT (Portugese) 
el_EL (Greek) 
dn_DN (Danish) 
cz_CS (Czech) 
it_IT (Italian) 
pl_PL (Polish) 
pv_FN (Finnish) 
hu_HU (Hungarian)
  FullScreenAsMaxWindow(Boolean)With this set to true, clicking on fullscreen will open a new browser window with FlexPaper maximized instead of using true fullscreen. This is a preferred setting when using FlexPaper as flash standalone as the security limitations of the Flash player disables (for security reasons) most of the input controls in true fullscreen.
  ProgressiveLoading(Boolean)Will load and display the document progressively when set to true as opposed to downloading the complete document before displaying the pages. Documents need to be converted to at least Flash version 9 for this to work (-T 9 flag using PDF2SWF).Please observe that this parameter has no effect in FlexPaper Zine. Please use split page loading for large documents in FlexPaper Zine.
  MaxZoomSize (Number)Sets the maximum allowed zoom level
  MinZoomSize (Number)Sets the minimum allowed zoom level
  SearchMatchAll(Boolean)When set to true, the viewer highlights all matches when performing searches in a document.
  InitViewMode (String)Sets the start-up view mode. For example "Portrait" or "TwoPage".
  PrintPaperAsBitmap(Boolean)When set to true, the viewer will print the document as a bitmap as opposed to vectorized
  StartAtPage (Number)Instructs the viewer to start at a specific page
  ViewModeToolsVisible(Boolean)Shows or hides view modes from the tool bar
  ZoomToolsVisible(Boolean)Shows or hides zoom tools from the tool bar
  NavToolsVisible(Boolean)Shows or hides nav tools from the tool bar
  CursorToolsVisible(Boolean)Shows or hides cursor tools from the tool bar
  SearchToolsVisible(Boolean)Shows or hides search tools from the tool bar
  jsDirectory (String)Sets the javascript directory to supplied location. This only applies to FlexPaper with AdaptiveUI enabled.
  cssDirectory (String)Sets the css directory to supplied location. This only applies to FlexPaper with AdaptiveUI enabled.
  localeDirectory (String)Sets the locale directory to supplied location. This only applies to FlexPaper with AdaptiveUI enabled.


The parameters are passed using flashvars or by setting properties on the flexpaper component inside flex, depending on your choice of usage. The code block below shows an example of how the parameters can be passed using the pre-compiled flash version

$('#documentViewer').FlexPaperViewer( 
       
{ config : {
         
SwfFile : "Paper.swf",
         
IMGFiles : "Paper.pdf_{page}.png",
         
JSONFile : "Paper.pdf.js",
         
PDFFile : "Paper.pdf",
         
Scale : 0.6,
         
ZoomTransition : "easeOut",
         
ZoomTime : 0.5,
         
ZoomInterval : 0.1,
         
FitPageOnLoad : false,
         
FitWidthOnLoad : false,
         
FullScreenAsMaxWindow : true,
         
ProgressiveLoading : true,
         
MinZoomSize : 0.2,
         
MaxZoomSize : 5,
         
SearchMatchAll : false,
         
InitViewMode : 'Portrait',
                 
         
ViewModeToolsVisible : true,
         
ZoomToolsVisible : true,
         
NavToolsVisible : true,
         
CursorToolsVisible : true,
         
SearchToolsVisible : true,
               
          localeChain
: "en_US"
}});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里提供一个使用FlexPaper实现Spring Boot文件在线预览的demo示例。 1. 首先,在pom.xml文件中添加FlexPaper的依赖: ``` <dependency> <groupId>com.flexpaper</groupId> <artifactId>flexpaper</artifactId> <version>2.3.6</version> </dependency> ``` 2. 在Spring Boot的配置文件application.properties中添加FlexPaper的配置: ``` flexpaper.viewerpath=/flexpaper flexpaper.swfpath=/flexpaper/Flash flexpaper.fonts=/flexpaper/fonts flexpaper.cacheDirectory=/tmp/flexpaper ``` 其中,`flexpaper.viewerpath`表示FlexPaper的根路径,`flexpaper.swfpath`表示FlexPaperSWF文件路径,`flexpaper.fonts`表示FlexPaper的字体路径,`flexpaper.cacheDirectory`表示FlexPaper的缓存目录。 3. 在Spring Boot的控制器中添加文件在线预览的方法: ```java @GetMapping("/preview") public ModelAndView preview(@RequestParam("file") String file) { ModelAndView modelAndView = new ModelAndView("preview"); String filePath = "file://" + new File(file).getAbsolutePath(); modelAndView.addObject("filePath", filePath); return modelAndView; } ``` 其中,`file`参数表示要预览的文件路径,这里使用`ModelAndView`来返回视图,视图名为`preview`。 4. 在Spring Boot的视图中添加FlexPaper的HTML代码: ```html <div id="documentViewer"></div> <script type="text/javascript"> $(document).ready(function () { $('#documentViewer').FlexPaperViewer({ config: { SwfFile: '${flexpaper.viewerpath}/${flexpaper.swfpath}/FlexPaperViewer.swf', Scale: 0.6, 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', RenderingOrder: 'flashhtml', StartAtPage: '', ViewModeToolsVisible: true, ZoomToolsVisible: true, NavToolsVisible: true, CursorToolsVisible: true, SearchToolsVisible: true, WMode: 'window', localeChain: 'en_US' } }); }); </script> <script type="text/javascript"> var swfobject = null; </script> <script type="text/javascript" src="${flexpaper.viewerpath}/${flexpaper.swfpath}/js/FlexPaperViewer.js"></script> ``` 其中,`${flexpaper.viewerpath}`表示FlexPaper的根路径,`${flexpaper.swfpath}`表示FlexPaperSWF文件路径。 5. 最后,在Spring Boot的静态资源目录中添加FlexPaper文件。将FlexPaper的`FlexPaperViewer.swf`文件和`js`目录复制到静态资源目录下。 这样,就可以实现Spring Boot文件在线预览的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值