在 Asp.net 的 iframe 中显示 PDF 的特定页面

Posted 2023-02-22

【中文标题】在 Asp.net 的 iframe 中显示 PDF 的特定页面

【英文标题】：Displaying a specific page of PDF inside iframe in Asp.net

【发布时间】：2016-08-08 09:54:49

【问题描述】：

我有一个 ASP.NET C# 应用程序。我在 iframe 内的特定页面上显示 PDF 文件。我需要根据文本框值显示 PDF 的特定页面。我怎样才能做到这一点？

iframe 代码如下所示：

<iframe runat="server" id="lobjPDFObj"   > </iframe>

以下是文本框的详细信息

<asp:TextBox ID="txtTo" runat="server" Text="1" class="page_txtbox" onfocus="synchronizePDF(this);" ></asp:TextBox>

javascript函数详情

function synchronizePDF(Field) 
            //parent.document.getElementById('lobjPDFObj').setCurrentPage(Field.value);
        var childiFrame = parent.document.getElementById('lobjPDFObj');           
        var URL = childiFrame.contentWindow.location.href;
        //var URL = childiFrame.src;               
        var pos = URL.indexOf('#page');
        if (pos < 0) pos = URL.length;
        var result = URL.substring(0, pos);
        if (URL != 'about:blank') 
            result += '#page=' + Field.value;
        
        childiFrame.contentWindow.location.reload(true);
        childiFrame.contentWindow.location.href = result;
        //childiFrame.src = result;
        //parent.document.getElementById('lobjPDFObj').setAttribute("src", result);

        

但这不起作用。它在“childiFrame.contentWindow.location.href”处给出错误，因为请求访问的框架具有“http”协议，正在访问的框架具有“https”协议。协议必须匹配。

我怎样才能摆脱错误？我在 url 中将 page no 作为参数传递。如何在不刷新整个内容的情况下显示新页面？

【问题讨论】：

你的 iframe 的初始 url 是什么？该错误表明您的网站在 http 上运行，并且 iframe 源 url 指向 https。只有当源 url 指向与您的网站相同的域时，您才能访问 iframe。

@Lesmian: test-doc.com/test/FileStorage/20160407/Input/… 013043.pdf 是路径...我能够在 iframe 中查看文档。但是在获取 contentWindow 详细信息时出现错误。

你能不能再给我一个 pdf 网址，因为它不适合我？

@PiyushKhatri：这是一个本地链接。请尝试使用任何外部 pdf url。

【参考方案1】：

如此处所述：The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match 和此处：Error trying to access a iframe in JavaScript iframe 可以显示来自另一侧的内容，但您不能以任何方式更改它，因为这会导致安全风险。如果您想更改 iframe 的内容，则它的来源必须来自同一个域（请参阅 CORS 以获取更多参考）。

另一种方法是允许其他域的跨域资源共享。为此，您需要指定特殊标题：

Access-Control-Allow-Origin: https://www.test-doc.com

有关此主题的更多信息：http://enable-cors.org/server_aspnet.html、http://docs.asp.net/en/latest/security/cors.html。

【讨论】：

如何在 iframe 中显示特定页面？当前代码无法在 Chrome 中运行，而 IE 可在 mozilla 中运行。

【参考方案2】：

在下面显示的两种方法中，当焦点离开 TextBox 时，本地 PDF 会在 iframe 中以选定的页码打开。

方法一

在此方法中，iframe 源 URL 的设置分为两步。第一步重置源，第二步将其设置为实际 URL。第二步必须异步执行才能正常工作（此处借助 setTimeout）。

iframe 和 TextBox 的标记：

<iframe id="iframePdfViewer" name="iframePdfViewer"   ></iframe>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />

Javascript函数：

function showPDF(pageNumber) 
    var iframe = document.getElementById("iframePdfViewer");
    iframe.src = '';
    setTimeout(function ()  iframe.src = 'MyFolder/MyDoc.pdf#page=' + pageNumber , 0);

方法二

在此方法中，每次显示 PDF 的新页面时，iframe 都会被新的 iframe 替换。为了减少屏幕闪烁：(1) 新 iframe 插入到旧 iframe 之下，(2) 旧 iframe 仅在新 iframe 完全加载时移除。

标记：

<div id="divPdfViewer" style="position: relative; width: 700px; height: 700px;"></div>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />

Javascript 代码：

function showPDF(pageNumber) 
    var divPdfViewer = document.getElementById('divPdfViewer');
    var ifrm = document.createElement("IFRAME");
    ifrm.id = 'iframePdfViewer';
    ifrm.style.position = 'absolute';
    ifrm.style.width = '100%';
    ifrm.style.height = '100%';
    var oldPdfViewer = divPdfViewer.firstChild;
    if (oldPdfViewer) 
        ifrm.onload = function ()  divPdfViewer.removeChild(oldPdfViewer); ;
        // Replace the line above by the line below if support for IE is required
        // setTimeout(function ()  divPdfViewer.removeChild(oldPdfViewer); , 100); 
        divPdfViewer.insertBefore(ifrm, oldPdfViewer);
    
    else 
        divPdfViewer.appendChild(ifrm);
    
    ifrm.setAttribute("src", 'MyFolder/MyDoc.pdf#page=' + pageNumber);

【讨论】：

有什么方法可以在不重新加载 iframe 的情况下切换 pdf 吗？我的 PDF 文件大小将是 50Mb 或更多..所以重新加载需要时间，这是不可接受的..请帮助

似乎只用 URL 是不可能的。如果我在浏览器的主窗口中加载PDF，然后在地址栏中修改页码，除非我在IE和Firefox中单击重新加载按钮，否则PDF不会改变页面，它会重新加载文档以改变页面在 Chrome 中。