在没有托管页面滚动条的情况下打印 iframe 的内容

Question

单击一个按钮，它会运行 PrintInvoice，它使用 jquery printElement（嗯，版本 1.2）打开一个 window，div 包含一个按钮和一个 iframe，以及打印对话框：

    <script type="text/javascript" language="javascript">
        function PrintInvoice() {
            $('DIV#EInvoice').printElement({
                printMode: 'popup',
                leaveOpen: true,
            });
        }
</script>

其中相关要素如下：

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

正确弹出 window 电子发票 div 内容并加载打印对话框，但托管页面显示垂直滚动条。

这当然会在打印文档中呈现。我需要在没有滚动条的情况下打印此页面（我不关心它是否显示在弹出窗口中 window。）目前用户取消打印对话框，右键单击实际发票，然后从那里打印（在没有滚动条的情况下正确执行）。

我尝试过的事情：在 iframe 上设置高度，在 div 上设置高度，将不同的设置传递到 printElement printBodyOptions，大约一百万个其他东西。

我想我需要做的是让托管在 iframe 中的页面展开到其全高，这样它就不需要显示滚动条了。我无法控制托管 OrderInvoice.aspx。

我该怎么做？或者还有哪些其他方法可以隐藏滚动条？

Answer 1

试试这个：

 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;" style="overflow: hidden"></iframe>

Answer 2

您无法将样式应用于 iframe 中的文档，因为它位于不同的域中。沙盒可以防止这种情况。为了实现您的要求，我的建议是缩小 iframe 的宽度，以便隐藏滚动条。

编辑：另一种解决方案可能是保持 iframe 宽度不变，并将 iframe 包装在另一个元素中（就像您对 #EInvoice 元素所做的那样），并使该包装元素的宽度小于iframe（比 iframe 的宽度小 15px 左右，你将不得不使用这个宽度差异来找到正确的值）并将溢出隐藏应用到元素（就像你对 #EInvoice 元素所做的那样）。这将切断右侧的滚动条。

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="width:575px;overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

Answer 3

您可以使用媒体查询为打印专门设置文档样式

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

这里有一个 decent article 可能会有帮助。

虽然您无法设置托管文档的样式，但您可以设置足够高的 iframe 样式，以便在没有滚动条的情况下打印托管文档。

Answer 4

很久以前我遇到过类似的问题，这就是我尝试过的方法。我几乎不记得 how/why 是我想到的，但仍会在这里分享： 我的 iframe:

<div style="text-align:center; width:800px; margin:0 auto;">
<iframe id="MyView" runat="server" frameborder="0" marginheight="0" marginwidth="0" style="height:800px; width:800px"></iframe>
</div>

//一些操作高度的js函数

$(function () {
    $("#MyView").load(function () { frameheight(); });
});
function frameheight() {
    var iFrame = document.getElementById("MyView");
    var iFrameBody;
    if (iFrame.contentDocument) {
        iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    else if (iFrame.contentWindow) {
        iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    resizeIframe(iFrameBody.scrollHeight);

}

function resizeIframe(height) {
    $("#MyView").height(parseInt(height) + 60);
}

注意：我在 asp.net 网页表单页面中使用它。

在没有托管页面滚动条的情况下打印 iframe 的内容

Printing contents of iframe without hosted page's scrollbar

javascript

jquery

iframe