如何在jquery中打印元素？

Question

var $print_layout;
$print_layout += '<div class="main_print">';
for($i=0;$i<=totalTokenNumer;$i++){
    $print_layout += '<div class="print_block">';
    $print_layout += $randomText[$i];
    $print_layout += '</div>';
}
$print_layout += '</div>';
var originalContents = document.body.innerHTML;
document.body.innerHTML = $print_layout;
window.print();
document.body.innerHTML = originalContents;

这是我的代码，用于在某些设计中打印随机文本。 但是我想直接在下面的代码中打印$print_layout变量，这可能吗？

var originalContents = document.body.innerHTML;
document.body.innerHTML = $print_layout;
window.print();
document.body.innerHTML = originalContents;

如果是，我该如何打印。

Answer 1

我假设您要使用功能生成的文本打开打印对话框，而不更改正在查看的页面的外观。 在这种情况下，请创建一个iframe，将iframe内容设置为函数的结果，然后在iframe的窗口中调用print。

Answer 2

您可以使用@media print媒体查询来控制页面的哪些部分在打印预览中可见

具有textarea内容的工作示例

使用要打印的对象变体的示例

的HTML

<div id="page">


<p>
click the button to print whatever is in the textbox. 
</p>
<textarea id="print-contents">
  this content will be printed

</textarea>
<p>
<button id="print-button">print</button>
</p>

</div>

<div id='print-view'>
xcvxvcxvc
</div>

JS

var printButton  = document.getElementById('print-button');
var printView = document.getElementById('print-view');
var printContents = document.getElementById('print-contents');

printButton.addEventListener('click', function(){
var toPrint = printContents.innerHTML;

printView.innerHTML = toPrint;
window.print();
});

的CSS

#print-view{
  display:none;
  width:400px;
  height:200px;
}

#print-contents{
  width:400px;
  height:200px;
}

@media print{

#print-view{
  display:block;

}

#page {
   visibility:hidden;
}

}