Печать содержимого iframe без полосы прокрутки прокрутки страницы

Question

Нажмите кнопку, и она запускает PrintInvoice, которая использует jquery printElement (hmm, version 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.

Как это сделать? Или какие другие подходы могут работать, чтобы скрыть полосу прокрутки?

Answer 1

Вы не можете применить стили к документу в IFRAME, как он находится на другом домене. Песочница предотвращает это. Мое предложение достичь того, что вы просите, это сделать ширину iframe меньшей, чтобы полоса прокрутки скрыта.

Редактировать: Другое решение может состоять в том, чтобы оставить ширину iframe как есть и обернуть iframe в другом элементе (как вы это сделали с элементом #EInvoice) и придать этому элементу обтекания меньшую ширину, чем iframe (15 пикселей или около того меньше ширины 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> 

Answer 2

Попробуйте это:

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

Вы можете укладывать документ специально для печати с использованием средств массовой информации запросов

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

Вот decent article, которые могли бы помочь.

Хотя вы не можете создать оформленный документ, вы можете создать стиль 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.