PDFTron Web 查看器在 Azure 中托管时不显示 XOD 文件

PDFTron Web Viewer not displaying XOD files on hosting in Azure

我的 ASP.NET 页面上有一个 PDFTron Web Viewer 控件,我可以在其中成功查看 PDFTron 已在 WebViewer 文件夹中提供的静态文件 'GettingStarted.xod'。该文件由 ASP.NET 网络 api REST 服务返回。该文件显示成功,而 运行 本地解决方案。在 Azure 中托管时,我成功地从 Web api 获取了文档,但托管 Web 查看器的网页不显示该文件,而是仅显示一个空的 Web 查看器控件。请建议如何让 XOD 显示在托管 Web 查看器控件的 ASP.NET 页面中。获取WebViewer目录下settings.js文件中XOD文件的代码如下:-

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. 
        }
    }
});

添加 .aspx 页面标记和在浏览器的控制台选项卡中收到的错误

<%@ 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>

浏览器中的控制台错误:

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)

看起来您正在使用 运行 旧版本的 WebViewer,它没有特定于 azure 的修复程序。

您需要切换到最新版本。 https://www.pdftron.com/webviewer/download.html

您可以通过在 Chrome 中调出开发人员控制台来检查您的版本,在左上角有一个下拉菜单应该显示“”,将其更改为 ReaderControl.html,然后 运行 readerControl.docViewer.version 在控制台中。

按照Ryan的建议,我升级到了最新的2.2.2版本。我离开了 WebApi 方法并使用 PDF Tron Web Viewer 作为 MVC 控制器首先将文件下载到 Azure 中的托管文件夹,然后在 MVC Razor View 上显示文件。