如何使用广播和文本值在JQuery中打印特定的Div内容

时间：2017-04-27 09:43:05

标签： jquery html

我有一个Html页面，单选按钮放在div标签上。我需要打印DIV内容。我将选择一个无线电选项，我需要使用无线电检查状态进行打印。

这是我试过的代码

脚本代码：

function PrintDoc(printarea){
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title + '</h1>');
        mywindow.document.write(document.getElementById('printarea').innerHTML);
    mywindow.document.write('</body></html>');    
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
    mywindow.print();
    mywindow.close();
    return true;
}

HTML代码

<DIV id="printarea">
    <input type="radio" name="myRadio" value="1" /> 1 <br />
    <input type="radio" name="myRadio" value="2" /> 2 <br />
    <input type="radio" name="myRadio" value="3" /> 3 <br />
</DIV>

我尝试过Windows.Print（）选项，但它会打印整个页面。我只需要像下面给出的图像那样精确的div

enter image description here

The image when I got printed

1 个答案:

答案 0 :(得分：0)

Fiddle link 使用jqprint插件打印特定div

另一个例子 的 HTML 

<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqprint-0.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="test.css">

<script language="javascript" type="text/javascript">
$(function() {
  $("#PrintButton").click( function() {
      $('#divToPrint').jqprint();
      return false;
  });
});
</script>
</head>
<body>
<input id="PrintButton" type="button" name="Print" value="Print" />

<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
<body>
</html

<强> CSS 

@media screen,print
{
  .test {
            background:#0F0;
            width:500px;
            height:200px;
        }
}

Demo

相关问题
最新问题