如何使用javascript在打印中仅获取内容特定的高度和宽度

时间:2017-07-07 08:58:02

标签: javascript jquery html css

我正在开发pos系统,但是当我打印我的账单时,它打印在整个页面我只是想要它应该只需要特定的宽度,只有那个覆盖在div中的高度。

这是我的代码

<html>
<head>
<title>div print</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">

  function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

</script>
</head>
<body>

<input name="b_print" type="button" class="ipt"   onClick="printdiv('div_print');" value=" Print ">

<div id="div_print" >

   <h1 style="Color:Red">this will print</h1>

</div>


</body>

</html>

1 个答案:

答案 0 :(得分:0)

理想的解决方案是在指定尺寸限制的地方使用单独的CSS进行打印。 您可以使用特定于打印的CSS样式表,并隐藏除您要打印的内容以外的所有内容。将您的元素分为两类,一类不打印,另一类将:

<div class="no-print">Ignore me</div><div class="something-else">Print me! 
 </div>

应该保留print类中的元素,而不应打印那些被忽略的元素。

<style type="text/css" media="print">
.no-print { display: none; }
</style>

作为警告,请小心使用“ document.all.item”,好像找到的元素不止一个,它将返回一系列可能导致问题的元素。