печать содержимого jquery colorbox - PullRequest
Новая
       5

печать содержимого jquery colorbox

2 голосов
/ 16 июля 2010

Я использую colorbox для AJAX внешнего HTML на странице.

Мой клиент хочет распечатать это содержимое прямо со страницы, поэтому я использовал CSS для печати, загруженный в заголовок документа с помощью обработчика события colorComplete onComplete.

Загружаемое содержимое представляет собой множество устаревших таблиц со встроенными стилями, которые я не могу переписать с помощью CSS для печати, и при просмотре по типу носителя макет выглядит неработающим.

Я объясняю это только получением фрагмента HTML с помощью jQuery .find (), а не всей страницы.

Лучше всего использовать iframe с colorbox и загружать весь HTML-документ, включая заголовок. Я предполагаю, что это сохранит компоновку лучше, чем извлечение фрагмента.

Я не уверен, как распечатать содержимое iframe. Когда я попробовал, он напечатал очень маленький снимок всей страницы с iframe посередине.

Я немного растерялся.

Используемый мной jQuery выглядит следующим образом: 

$('table.pricing > tbody > tr > th > p.price_report > a').colorbox({
    title: "Price report",
    transition: "elastic",
    innerWidth: "733px",
    innerHeight: "699px",
    opacity: "0.5",
    onComplete:function(){
    // Ajax call to content
    // insert Print CSS into head of document 

    }

});

Загруженный CSS для печати просто скрывает содержимое тела, а затем отображает все под # colorbox.

Извиняюсь, весь правильный код работает.

1 Ответ

3 голосов
/ 16 июля 2010

1) Я бы посоветовал перейти к «встроенному» варианту colorbox (но вам не обязательно): 

<script type="text/javascript">
$(document).ready(function(){
 $(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true,  href:"#price_report"});
});
</script>

2) Теперь добавьте ваш html, включая javascript и код, чтобы написать область печати: 

<div style='display: none'>
  <div id='price_report' class='pricing'>



<script type="text/javascript">
//<!--

function ClickHereToPrint(){
    try{ 
        var oIframe = document.getElementById('ifrmPrint');
        var oContent = document.getElementById('pricingPrintArea').innerHTML;
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
        oDoc.write("<html><head><title>My Printable Pricing Report!</title>");
        oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />");
        oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>");
        oDoc.write("<h3>My Pricing Report</h3>");
        oDoc.write(oContent + "</body></html>");        
        oDoc.close();       
    }
    catch(e){
        self.print();
    }
}

//-->
</script>




<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe>

<div id="pricingPrintArea">

   <div class="myreport">
       <p>Hello, I am a pricing report!</p>
   </div>
</div>


</div>
</div>

3) Теперь добавьте кнопку печати, где вы хотите: 

<div id="print_btn">
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;">
<span class="print_btn">
    Click Here To Print This Report!
</span>
</a>
</div>

Обратите внимание, что в пустой iframe javascript будет записана область печати. В javascript вы также заметите, что вы можете добавить таблицу стилей, встроенные стили, заголовок страницы и многое другое!

Имейте в виду, этот процесс будет работать аналогично для ajax-версии colorbox, но если вы пойдете по пути метода ajax, вам придется записать печатаемый div и распечатать iframe и напечатать javascript непосредственно в этот внешний файл .

Теоретически, все, что находится внутри печатаемого региона div (в этом примере: pricingPrintArea), будет печататься, поэтому, пока вы оборачиваете его вокруг того, что хотите печатать, оно будет это делать.

Важный совет: все принтеры читают веб-страницу по-разному, поэтому старайтесь не слишком полагаться на встроенные стили и размеры в пикселях для вашей версии для печати. Вот почему рекомендуется создать таблицу стилей специально для печатной страницы.

Надеюсь, это ответит на ваш вопрос. (кстати, вы должны иметь возможность заставить этот метод работать с методом ajax colorbox, но я не проверял его).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...