将 2 个 div 附加到一个中以使用 javascript 打印它们答案

【问题标题】：append 2 div into one to print them with javascript将 2 个 div 附加到一个中以使用 javascript 打印它们
【发布时间】：2015-11-30 10:58:25
【问题描述】：

我有这段代码可以帮助我打印一个 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>
...

但我收到以下错误：

未捕获的类型错误：无法读取 null 的属性“appendChild”

编辑： 现在我没有任何错误，但仍然无法将 2 组合起来打印它们我在底部得到了页面的链接，我需要从打印的纸上删除

【问题讨论】：

document.getElementById('container') 返回null。你能分享你的html吗？
我们需要你的 html...你有#container 吗？
是的，我有一个<div id="container">，其中包含我页面中的所有工作 div
查看我的 html 代码并编辑这个问题

标签： javascript jquery html

【解决方案1】：

回复您的编辑：

我假设您正在使用 Google Chrome 来打印该页面。当您按下 Ctrl+P 时，您会在左侧看到打印预览和一堆选项。如果您按“+”按钮，您会看到更多选项。那里有一个“页眉和页脚”选项。从该选项中删除勾号，您应该能够打印没有底部 URL 的页面。

希望对你有帮助。

【讨论】：

如何使用代码自动执行此操作？因为当用户想打印时，他们可能不知道，再加上出于安全考虑，我想删除url，所以即使用户也看不到它
据我所知，你不能用 javascript 做到这一点。看看this post，也许你可以用CSS覆盖那个底部链接。
此链接为非谷歌浏览器用户提供答案

【解决方案2】：

你可以试试这样的：

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

【讨论】：

好的，可以，但现在帮我删除打印页面底部的链接
你能帮我解决我问题的最后一部分吗？
从底部打印时如何删除页面的url？
看看这个，应该能帮到你stackoverflow.com/questions/1960939/…