Search code examples
javascripthtmlflexpaper

FlexpaperViewer issue

I generated a json file using pdf2json; now I want to render it in html 4 using FlexpaperViewer but when I try I get an 'Uncaught TypeError: Cannot call method 'replace' of undefined.

Here is the html: 

<!DOCTYPE html/> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   
    <head>  
        <title>FlexPaper</title>          
        <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>  
        <link href="../../FlexPaper/flexpaper.css" rel="stylesheet" type="text/css" /> 
        <script src="../../FlexPaper/jquery-1.10.2.js" type="text/javascript"></script> 
        <script src="../../FlexPaper/jquery.extensions.min.js" type="text/javascript"></script> 
        <script src="../../FlexPaper/flexpaper.js" type="text/javascript"></script> 
        <script src="../../FlexPaper/flexpaper_handlers.js" type="text/javascript"></script> 
        <script src="../../FlexPaper/flexpaper_handlers_debug.js" type="text/javascript"></script> 
        <script src="../../FlexPaper/FlexPaperViewer.js" type="text/javascript"></script> 
    </head> 
    <body> 
        <div id="documentViewer" class="flexpaper_viewer" style="position:absolute;left:10px;top:10px;width:770px;height:500px"></div> 

    <script type="text/javascript"> 
        $(document).ready(function () { 
            $('#documentViewer').FlexPaperViewer( 
              { config: { 
                  //DOC : escape(getDocumentUrl(startDocument)), 
                  JSONFile: "../../FlexPaper/paper.js", 
                  Scale: 0.6, 
                  ZoomTransition: 'easeOut', 
                  ZoomTime: 0.5, 
                  ZoomInterval: 0.1, 
                  FitPageOnLoad: true, 
                  FitWidthOnLoad: false, 
                  FullScreenAsMaxWindow: false, 
                  ProgressiveLoading: false, 
                  MinZoomSize: 0.2, 
                  MaxZoomSize: 5, 
                  SearchMatchAll: false, 
                  RenderingOrder: 'html,html5', 
                  ViewModeToolsVisible: true, 
                  ZoomToolsVisible: true, 
                  NavToolsVisible: true, 
                  CursorToolsVisible: true, 
                  SearchToolsVisible: true, 
                  key: '***', 
                  localeDirectory: "../../FlexPaper/locale/", 
                  localeChain: 'en_US' 
              } 
              } 
            ); 
        }); 
    </script> 


</body>

Could you help me to find what I did wrong ? Thanks in advance.

Solution

  • In Firefox you get a different error:

    TypeError: this.pageImagePattern is undefined

    It seeems that the HTML version of FlexPaper needs both the PDF and the JSON file to render.

    So, you also need to specify the :

    PDFFile: "../../sth",

    This will make it work fine. Cheers! :)