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

debugcn 发表于 Dev

唐内尔

单击一个按钮，然后运行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内容的窗口并加载打印对话框，但是托管页面显示垂直滚动条。

带有滚动条的弹出窗口

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

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

我想我需要做的是将页面托管在iframe中以展开到完整高度，因此不需要显示滚动条。我无法控制托管的OrderInvoice.aspx。

我怎样才能做到这一点？或者其他什么方法可以隐藏滚动条？

尼奥克斯

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

编辑：另一种解决方案可能是保持iframe的宽度不变，然后将iframe包裹在另一个元素中（就像您对#EInvoice元素所做的那样），然后为该包裹元素提供比iframe小的宽度（比iframe的宽度小15px左右）在iframe中，您将必须使用此宽度差来找到正确的值）并将隐藏的溢出应用于元素（就像对#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-10

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章