我正在使用 colorbox 将一些外部 HTML AJAX 到页面上。
我的客户想要直接从页面打印此内容，因此我使用了通过 colorbox 的 onComplete 事件 Hook 加载到文档头部的打印 CSS。
加载的内容是大量带有内联样式的旧表，我似乎无法用打印 CSS 覆盖它们，并且当我按媒体类型查看时，布局看起来已损坏。
我将其归结为仅使用 jQuery .find() 检索 HTML 的一部分，而不是整个页面。
最好使用带有 colorbox 的 iframe 并加载整个 HTML 文档(包括标题)。我认为这会更好地保留布局而不是检索 block 。
我不知道如何打印 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)我建议切换到“内联”颜色框选项(但您不必这样做):
<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 中，您可以添加样式表、内联样式、页面标题等!
请记住，此过程对于 colorbox 的 ajax 版本的工作方式类似，但如果您采用 ajax 方法，则必须编写可打印的 div 并打印 iframe 并将 javascript 直接打印到该外部文件.
理论上，可打印区域 div 内的任何内容(在本例中为:pricingPrintArea)都会打印，因此只要将其包裹在要打印的内容周围，它就会打印。
重要提示:打印机读取网页的方式不同，因此请尽量不要过多依赖可打印版本的内联样式和像素尺寸。这就是为什么专门为可打印页面创建样式表是个好主意。
希望这能回答您的问题。 (顺便说一句，你应该能够让这个方法与colorbox的ajax方法一起使用，但我还没有测试过)。
关于jquery-plugins - 打印 jquery colorbox 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3259959/