Question

单击一个按钮，它运行PrintInvoice，它使用jquery printElement（hmm，版本1.2）打开一个窗口，其中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>

使用EInvoice div内容正确弹出一个窗口并加载打印对话框，但托管页面显示一个垂直滚动条。

Popup window with scrollbar

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

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

我认为我需要做的是让iframe中托管的页面扩展到其完整高度，因此它不需要显示滚动条。我无法控制托管的OrderInvoice.aspx。

我该怎么做？或者其他方法可能会隐藏滚动条？

Answer 1

您无法将样式应用于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 2

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

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

以下是decent article可能会有所帮助。

虽然您无法设置托管文档的样式，但您可以使用足以在不使用滚动条的情况下打印托管文档的高度设置iframe样式。

Answer 3

试试这个：

 <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 4

长时间回来我有类似的问题，这就是我尝试过的。我几乎不记得我是如何/为什么想出来的，但仍会在这里分享： 我的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内容

4 个答案: