Question

我正在使用colorbox将一些外部HTML AJAX打印到页面上。

我的客户希望直接从页面打印此内容，因此我使用了一个打印CSS加载到文档的头部，并使用了colorbox的onComplete事件挂钩。

加载的内容是一系列具有内联样式的遗留表，我似乎无法用打印CSS覆盖，当我按媒体类型查看时，布局看起来很破碎。

我把它归结为只使用jQuery .find（）而不是整个页面来检索HTML的一部分。

最好将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。

下的所有内容

道歉所有正确的代码都在起作用。

Answer 1

1）我建议切换到“内联”颜色框选项（但你不必）：

<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）现在添加包含javascript和代码的html来编写可打印区域：

<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中注意到你可以添加样式表，内联样式，页面标题等等！

请记住，此过程对于colorbox的ajax版本的工作方式类似，但是如果你走了ajax方法的路线，则必须编写可打印的div并打印iframe并将javascript直接打印到该外部文件

理论上，可打印区域div中的任何内容（在此示例中：pricingPrintArea）都会打印，因此，只要您将其打包在您要打印的任何内容之外，它就会这样做。

重要提示：打印机都以不同的方式阅读网页，因此请尽量不要过多依赖内嵌样式和像素尺寸来打印可打印版本。这就是为什么专门为可打印页面创建样式表是个好主意。

希望能回答你的问题。（顺便说一下，你应该能够使用这个方法来处理colorbox的ajax方法，但我还没有测试过它。）

打印jquery彩盒内容

1 个答案: