将2 div添加到一个用javascript打印它们

时间:2015-11-30 10:58:26

标签: javascript jquery html

我有这个代码可以帮我打印div:

 function printData()
{
   var divToPrint=document.getElementById("section2");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);




    var css = "table, td, th { \n"+
"    border: 1px solid black; \n"+
"    txt-align:justify; \n"+
"} \n"+
"th {  \n"+
"    background-color: #7a7878; \n"+
"    text-align:center; \n"+
"}";
   var div = $("<div />", {
    html: '&shy;<style>' + css + '</style>'
  }).appendTo( newWin.document.body);
  //newWin.document.createStyleSheet('http:127.0.0.1/clinic form/table.css');

   newWin.print();


   newWin.close();
}

$('button').on('click',function(){
            $("th").css("background-color", "red");
//$("th:contains('Exceeds')").addClass('table');
printData();
});


$('button').on('click',function(){
printData();
})// JavaScript Document

我想将2个div连接成一个,然后打印它们,我试着添加这个代码:

var content1 = document.getElementById('section2').innerHTML;
var content2 = document.getElementById('header').innerHTML;

// create our new div, pop the content in it, and give it an id
var combined = document.createElement('div');
combined.innerHTML = content1 + " " + content2; // a little spacing
combined.id = 'new';
document.getElementById('container').appendChild(combined);

这是我的HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>print page</title>
<link rel="stylesheet" href="../include/stat.css" type="text/css">
<script type="text/javascript" src="/clinic form/include/jquery.min.js"></script>
<script type="application/javascript" src="../include/printing.js"></script>
</head>
<body>
<div id="container">
<div id="header"> <a href="../projDetails.php?id=<?php echo $id ?>"><img src="../images/logo.jpg"></a> </div>
<center>
  <a href="../logout.php">Logout</a>
<br /> <br />
<form action="" method="post" name="daily_report">
<input type="date" name="Date"/>
<input type="submit" name="submitDate" value="Generate Report" />
</form>
<?php
...
?>
<div id="section2" align="center">
<table border="1" cellpadding="2" cellspacing="1" align="center" dir="rtl">
<tr>
...

但是我收到了以下错误:

  

未捕获的TypeError:无法读取null

的属性'appendChild'

修改 现在我没有任何错误,但仍然无法将2组合打印出来 我得到了页面底部的链接,我需要从打印纸上删除 enter image description here

2 个答案:

答案 0 :(得分:2)

回复您的修改:

我假设您使用的是Google Chrome打印页面。当您按Ctrl + P时,您会看到打印的预览以及左侧的一系列选项。如果按“+”按钮,则会看到更多选项。你有一个'页眉和页脚'选项。从该选项中删除勾选,您应该能够打印没有底部URL的页面。

希望它有所帮助。

答案 1 :(得分:1)

您可以尝试这样的事情:

var content1 = document.getElementById('section2').innerHTML;
var content2 = document.getElementById('header').innerHTML;

// create our new div, pop the content in it, and give it an id
var combined = document.createElement('div');
combined.innerHTML = content1 + " " + content2; // a little spacing
combined.id = 'new';
newWin= window.open("");
newWin.document.write(combined.outerHTML);

编辑:在您的原始代码中,您打开一个newin=window.open("")的新窗口,而不是写入要在其中打印的div副本,而不是将新窗口发送到打印机。因此,只需组合您要打印的div并将其传递给newin.document.write,以便在打印前在新窗口中写入两个div