C# PDFTron Web Viewer在Azure中托管时未显示XOD文件

C# PDFTron Web Viewer在Azure中托管时未显示XOD文件,c#,azure,asp.net-web-api,pdftron,C#,Azure,Asp.net Web Api,Pdftron,在我的ASP.NET页面上有一个PDFTron Web Viewer控件,我可以在其中成功查看PDFTron已在WebViewer文件夹中提供的静态文件“GettingStarted.xod”。该文件由ASP.NET web api REST服务返回。在本地运行解决方案时,文件显示成功。在Azure中托管时,我成功地从web api获取了文档,但是托管web viewer的网页没有显示文件,而是只显示一个空的web viewer控件。请建议如何在承载web viewer控件的ASP.NET页面中

在我的ASP.NET页面上有一个PDFTron Web Viewer控件,我可以在其中成功查看PDFTron已在WebViewer文件夹中提供的静态文件“GettingStarted.xod”。该文件由ASP.NET web api REST服务返回。在本地运行解决方案时,文件显示成功。在Azure中托管时,我成功地从web api获取了文档,但是托管web viewer的网页没有显示文件,而是只显示一个空的web viewer控件。请建议如何在承载web viewer控件的ASP.NET页面中显示XOD。在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特定的修复程序

您需要切换到最新版本。


您可以通过在Chrome中打开开发人员控制台来检查您的版本,在左上角有一个下拉列表,应该是,将其更改为ReaderControl.html,然后在控制台中运行ReaderControl.docViewer.version。

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

Azure上托管了什么?网页和XOD文件?如果没有,在哪里托管什么?任何浏览器都会出现这种情况吗?javascript控制台或浏览器中“开发人员”面板的“网络”选项卡中是否存在任何错误消息。请将此信息添加到您的问题中。@Rayn:是的,网页和XOD文件都托管在Azure中。是的,所有浏览器如MS Edge、Chrome等都会出现这种情况。我在帖子中添加了.aspx页面标记和浏览器控制台错误消息,供您参考。我看到一些用户在PDFTrom上提出了类似的问题,google group在Azure上托管XOD后未显示XOD;这些帖子的用户web查看器构造函数代码为var webViewer=new PDFTron.webViewer{}@Ryan:我看到的错误是:SCRIPT5022:codeError加载文档:无效的XOD文件:Zip端头数据大小错误!CoreControls.js 727381代码,如两篇文章中所述。请建议不要在代码窗口中显示streaming=true和azureWorkaround=false选项。WebViewerUniversalInstance.model.setI已从PDF网站下载了最新版本2.2.2。但是,当我通过选择ReaderControl.html并执行“ReaderControl.docViewer.version”在控制台窗口中检查版本时,我看到了1.7.1.24014。请提出建议。如下所示在Azure上工作,但不使用documentUrl$函数{var viewerElement=document.getElementById'viewer';var myWebViewer=new PDFTron.WebViewer{path:'lib',type:'html5',documentType:xod,initialDoc:lib/GettingStarted.xod,config:,streaming:false,enableAnnotations:false,enableOfflineMode:false,enableReadOnlyMode:true},viewerElement;};您需要更新到WebViewer 2.2.2。特别是,这意味着用新文件夹替换lib文件夹。您看到的是1.7.1.24014,因为您没有成功更新版本。我首先要确保清除服务器和客户端浏览器上的所有缓存。可能您需要重新启动服务器。您还可以使用incognito/pr浏览器中的ivate模式。或者可能是您替换了错误的WebViewer/lib文件夹,而该服务器正在加载另一个文件夹。documentUrl参数不是新API的一部分,新API是围绕3个不同查看器(Silverlight、Flash和HTML5)的旧包装。HTML5是目前唯一受支持的,而新的WebViewer构造函数是一个initialDoc参数。我建议只在Azure服务器上运行stock SDK示例,以确保所有设置都正确,然后更新主项目。运行sock示例只需解压缩到服务器上的托管文件夹中。