CODEWITHSUNDEEP
c#azureasp.net-web-apipdftron
Sudipta Chaudhari
Sudipta Chaudhari

Reputation: 129

PDFTron Web Viewer not displaying XOD files on hosting in Azure

I have a PDFTron Web Viewer control on my ASP.NET page where I can successfully view a static file 'GettingStarted.xod' already provided by PDFTron in the WebViewer folder. The file is returned by a ASP.NET web api REST service. The file displays successfully while running the solution locally. On hosting in Azure, I get the document from the web api successfully but the web page hosting the web viewer doesn't show the file, instead an empty web viewer control is only displayed. Please suggest how can I get the XOD to be displayed in the ASP.NET page hosting the web viewer control. The code for fetching the XOD file in settings.js file on WebViewer directory is as follows:-

window.WebViewerUniversalInstance.model.set(
{
    documentUrl: "/api/Document/GetXODDocument",
    //serverUrl: "../html5/annotationHandler.php",    //server script for handling annotations
    annotationUser: new PDFTron.WebViewer.User("Guest", false),
    currentPageNumber: 0,
    pageCount: 0,
    zoomLevel: 0,
    fitMode: PDFTron.WebViewer.FitMode.Zoom,
    layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
    toolMode: '',
    rotation: 0,
    webViewerLibPath: 'lib/', //URL path to the WebViewer lib folder
    webViewerOptions: { //extra WebViewer options
        silverlightOptions: {
            enableAnnotations: false //disable annotations if silverlight is loaded. 
        }
    }
});

Adding the .aspx page markup and errors received in console tab of browser

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DocViewer.aspx.cs" Inherits="PDFTronWebViewerWebApi.Content.WebViewer.View" %>

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--<![endif]-->

<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <!-- use latest browser mode for IE -->
        <title>WebViewer Universal</title>

        <!-- WebViewer.js Dependencies -->
        <script type="text/javascript" src="lib/resources/jquery-1.10.2.min.js"></script>     
        <!-- WebViewer.js IF DEBUG -->
        <!--<script src="../silverlight/Silverlight.js" type="text/javascript"></script>
        <script src="../flash/FlashUtils.js"></script>
        <script src="../flash/swfobject.js"></script>
        <script src="../flash/FABridge.js"></script>
        <script src="../flash/HttpAjaxPartRetriever.js"></script> 
        <script src="../WebViewer.js" type="text/javascript"></script>-->
        <!-- WebViewer.js ELSE IF PRODUCTION  -->
        <script src="lib/WebViewer.min.js" type="text/javascript"></script>
        <!-- WebViewer.js END -->

        <!-- WebViewer Universal Dependencies -->
        <script type="text/javascript" src="lib/resources/jquery-ui-1.10.3/jquery-ui.min.js"></script>        
        <script type="text/javascript" src="lib/resources/modernizr.custom.js"></script>
        <script type="text/javascript" src="lib/resources/i18next-1.7.1/i18next-1.7.1.min.js"></script>
        <script type="text/javascript" src="lib/resources/backbone/underscore-min.js"></script>
        <script type="text/javascript" src="lib/resources/backbone/backbone-min.js"></script>

        <!-- WebViewer Universal Specific -->
        <link type="text/css" rel="stylesheet" href="lib/universal/universal.css" />
        <script src="lib/universal/universal.js"></script>

        <!-- WebViewer Universal Settings (Modify this to your own server setup) -->
        <script src="settings.js"></script>

       <!-- WebViewer Universal Theming -->
        <link type="text/css" rel="stylesheet" href="lib/resources/themes/cloud/jquery-ui-1.10.0.custom.min.css" />
        <link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" /> <!-- use the extra icon set for the classic theme -->
        <link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" media="screen" /> <!-- use the extra icon set for the classic theme -->
</head>
<body>
    <form id="form1" runat="server">

        <div id="headerContainer">       
            <!-- Optional: add custom header content here.
                 Example usage: Application logo/branding, links to other pages in your app (My Account, Login, Sign up), etc.
            -->
            <div>
                <span>
                    <br />
                    <span style = "font-weight:bold; font-size: 22px;" > Doc View Page </span> <br /><br />
                    <span>Doc Number : <asp:Label ID="lblDocNo" runat="server" /> ; File Type : XOD</span><br />
                    <span>File : <asp:Label ID="lblDocName" runat="server" /></span>
                </span>
            </div>
            <div style = "clear:both" ></div>

        </div>
        <div id="contentContainer">
            <div id="leftPanelContainer" style="float:left;">
            </div>
            <div id="viewerContainer" style="float:left;width:100%">
                <div id="control" class="toolbar ui-widget-header" style="overflow:hidden;white-space:nowrap">
                    <span class="left-aligned">
                        <button id="sidePanelToggle" type="button" data-i18n="[title]controlbar.toggleSidePanel;controlbar.toggleSidePanel"></button>
                    </span>
                    <div class="right-aligned">
                        <div class="group">
                            <button id="layoutModeMenuButton" type="button" data-i18n="[title]controlbar.pageLayoutModes;controlbar.pageLayoutModes"></button>
                            <button id="rotateButton" type="button" data-i18n="[title]controlbar.rotate;controlbar.rotate"></button>
                        </div>
                        <div class="group">
                            <button type="button" id="prevPage" data-i18n="[title]controlbar.previousPage;controlbar.previousPage"></button>
                            <input type="text" pattern="[0-9]*" name="pageNumberBox" id="pageNumberBox"/>
                            <div class="ui-label" id="totalPages">/0</div>
                            <button type="button" id="nextPage" class="" data-i18n="[title]controlbar.nextPage;controlbar.nextPage"></button>
                        </div>
                        <div class="group">
                            <button type="button" id="zoomOut" data-i18n="[title]controlbar.zoomOut;controlbar.zoomOut">Zoom Out</button>
                            <div class="hidden-xs hidden-sm hidden-md" id="slider" data-i18n="[title]controlbar.zoom"></div>
                            <input type="text" name="zoomBox" id="zoomBox" data-i18n="[title]controlbar.zoom"/>
                            <button type="button" id="zoomIn" data-i18n="[title]controlbar.zoomIn;controlbar.zoomIn"></button>
                        </div>

                        <div class="group">
                            <div id="fitModes"  class="hidden-xs" title="Page layout">
                                <input type="radio" id="fitWidth" name="radioFirst"/>
                                <label for="fitWidth" data-i18n="[title]controlbar.fitWidth;controlbar.fitWidth"></label>
                                <input type="radio" id="fitPage" name="radioFirst"/>
                                <label for="fitPage" data-i18n="[title]controlbar.fitPage;controlbar.fitPage"></label>
                            </div>
                        </div>
                        <div class="group">
                            <span id="tools">
                                <input type="radio" id="pan" data-tool-mode="Pan" name="radioSecond" />
                                <label for="pan" data-i18n="[title]controlbar.pan;controlbar.pan"></label>
                                <input type="radio" id="textSelect" data-tool-mode="TextSelect" name="radioSecond"/>
                                <label for="textSelect" data-i18n="[title]controlbar.textSelect;controlbar.textSelect"></label>
                            </span>
                        </div>
                        <div class="group">
                            <span id="searchControl" class="search-component hidden-xs hidden-sm">
                                <input id="searchBox" type="text" class="toolbar-input-text search-component" name="search" data-i18n="[title]controlbar.search"/>
                                <button id="searchButton" class="search-component" type="button" data-i18n="[title]controlbar.search;controlbar.search"></button>
                            </span>
                        </div>
                        <div class="group">
                            <button id="downloadButton" type="button" data-i18n="[title]controlbar.download;controlbar.download"></button>
                            <button id="printButton" type="button"  data-i18n="[title]controlbar.print;controlbar.print" style="display: none;"></button>
                            <button id="fullScreenButton" type="button" data-i18n="[title]controlbar.fullScreen;controlbar.fullScreen"></button>
                            <button id="aboutButton"  type='button'>About</button>
                        </div>        
                    </div>
                </div>
                <ul id="layoutModeMenuList" class="ui-widget ui-menu-dropdown" style="display:none">
                    <li data-layout-mode="SinglePage"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single"></span>
                            <div data-i18n="controlbar.layoutMode.single"></div></a></li>
                    <li data-layout-mode="Continuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single-cont"></span>
                            <div data-i18n="controlbar.layoutMode.continuous"></div></a></li>
                    <li data-layout-mode="Facing"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing"></span>
                            <div data-i18n="controlbar.layoutMode.facing"></div></a></li>
                    <li data-layout-mode="FacingContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing-cont"></span>
                            <div data-i18n="controlbar.layoutMode.facingContinuous"></div></a></li>
                    <li data-layout-mode="FacingCover"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover"></span>
                            <div data-i18n="controlbar.layoutMode.cover"></div></a></li>
                    <li data-layout-mode="CoverContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover-cont"></span>
                            <div data-i18n="controlbar.layoutMode.coverContinuous"></div></a></li>
                </ul>
                <div id="overlayMessage" class="overlayMessage" style="display:none"></div>
                <div id="printDialog" style="display:none">
                    <div>
                        <span data-i18n="print.pagesToPrint"></span>
                        <input type="text" id="printPageNumbers" title="Enter a single page number or a single page range. e.g. 3, 4-10." placeholder="e.g. 3, 4-10" style="width:100px"  />
                    </div>
                    <br/>
                    <div id="printProgress"><div class="progressLabel"></div></div>
                </div>
                <div id="documentContainer" style="overflow: auto;width:100%;">
                </div>
            </div>

        <div id="rightPanelContainer" style="float:right;">
            </div>
            <div style="clear:both"/>
        </div>
        <div id="footerContainer">            
            <!-- Optional: add footer content here 
                 Example usage: Application logo/branding, a secondary control toolbar (e.g. page navigation), status bar
            -->
        </div>
    </form>
</body>
</html>

Console Errors in browser:

HTML1300: Navigation occurred.
DocViewer.aspx
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
DocViewer.aspx
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/jquery-1.10.2.min.map
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
DocViewer.aspx (166,13)
HTML1508: Unmatched end tag.
DocViewer.aspx (173,5)
HTML1521: Unexpected "</body>" or end of file. All open elements should be closed before the end of the document.
DocViewer.aspx (174,1)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/i18next-1.7.1/translation-en.json
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/underscore.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/backbone.js
SCRIPT7016: Use of XMLHttpRequest with the synchronous flag set to true is deprecated due to its impact on user-perceived site performance.
jquery-1.8.2.min.js (2,85652)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/html5/Resources/i18n/translation-en.json
SCRIPT5022: Error loading document: Invalid XOD file: Zip end header data is wrong size!
CoreControls.js (727,381)

Upvotes: 0

Views: 1922

Answers (2)

Sudipta Chaudhari
Sudipta Chaudhari

Reputation: 129

As suggested by Ryan, I upgraded to latest version 2.2.2. I left the WebApi approach and using PDF Tron Web Viewer as used MVC controller to download the file first on hosted folder in Azure and then displayed the file on MVC Razor View.

Upvotes: 1

Ryan
Ryan

Reputation: 2570

It looks like you are running an older version of WebViewer that does not have the azure specific fixes.

You need to switch to the latest version. https://www.pdftron.com/webviewer/download.html

You can check your version by bringing up a developer console in Chrome, in the top left there is a dropdown that should say "", change this to ReaderControl.html, then run readerControl.docViewer.version in the console.

Upvotes: 0

Related Questions