append 2 div into one to print them with javascript

Question

I have this code that helps me to print a 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

I want to connect 2 div into one, and the print them, I tried to add this code:

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);

This is my html code:

<!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>
...

But I got the following error:

Uncaught TypeError: Cannot read property 'appendChild' of null

EDIT: Now I don't have any errors, but still can't combine the 2 to print them And I got the link of the page at the bottom and I need to remove from printed paper

`document.getElementById('container')` returns `null`. Can you share your html ? — Rayon, Nov 30 '15 at 11:04

score 2 · Answer 1 · answered Nov 30 '15 at 12:05

2

Replying to your edit:

I'm assuming you are using Google Chrome to print the page. When you hit Ctrl+P you see a preview of your print and a bunch of options on the left. If you press the '+' button, you see more options. There you have a 'Headers and Footers' option. Remove the tick from that option and you should be able to print the page without the bottom URL.

Hope it helps.

answered Nov 30 '15 at 12:05

Rafael Bizarra

103
10

how can I do that automatically with codes ? Because when users want to print, they may don't know about, plus it is for security reason that I want to remove the url, so even the user can't see it – am90 Nov 30 '15 at 12:18
As far as i know, you cannot do that with javascript. Take a look at [this post](http://stackoverflow.com/a/13137209/3415004), maybe you can use CSS to override that bottom link. – Rafael Bizarra Nov 30 '15 at 12:22
This link give an answer for non google chrome users – am90 Nov 30 '15 at 12:24

AndreaG · Accepted Answer · 2015-11-30T12:03:09.563

1

You can try something like this:

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);

EDIT: in your original code you are opening a new window with newin=window.open("") than you write a copy of the div to print in it and than you send to the printer the new window. So just combine the divs you'd like to print and pass it to the newin.document.write to write both divs in the new window before print

edited Nov 30 '15 at 12:03

answered Nov 30 '15 at 11:48

AndreaG

239
1
5

Ok, it works, but now help me to remove the link in the bottom of printed page – am90 Nov 30 '15 at 11:53
Can you help me with the last part of my question ? – am90 Nov 30 '15 at 11:56
And how can I remove the url of the page while printing from the bottom ? – am90 Nov 30 '15 at 11:59
Check this out, should help you http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page – AndreaG Nov 30 '15 at 12:03

append 2 div into one to print them with javascript

2 Answers2