0

我在我的 ASP.NET 页面上有一个PDFTron Web Viewer控件,我可以在其中成功查看 PDFTron 在 WebViewer 文件夹中已经提供的静态文件“GettingStarted.xod”。该文件由 ASP.NET Web apiREST服务返回。该文件在本地运行解决方案时成功显示。在托管时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)
4

2 回答 2

1

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

于 2017-03-03T05:21:11.030 回答
0

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

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

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

于 2017-02-10T19:43:57.413 回答