一、局部打印，打印单独的一部分内容
方法：为要打印的内容设置单独的id名，新开窗口并打印。
举例如下：
1、html
<div id="pulPrint"> 我是要打印的内容 </div> <div class="btn btn-primary print-btn">打印</div>
2、js
$(".print-btn").on("click",function(){
printsingle("pulPrint");
})
//局部打印 这里的printpage是id
function printsingle(printpage){
var headstr="<html><head><title></title></head><body>";
var footstr="</body></html>";
var newstr=document.all.item(printpage).innerHTML;
var oldstr=document.body.innerHTML;
var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
myWindow.document.body.innerHTML=headstr+newstr+footstr;
myWindow.print();
setTimeout(function(){
myWindow.close();
},300);
return false;
}
二、选中多块区域并打印，举例如下
1.html
<div class="wrap"> <!-- <div id="pulPrint">我是单个打印</div> --> 我是wrap <div class="print-item"> <p>打印部分一</p> <div> <strong>粗体</strong> <a href="http://www.cnblogs.com/kangby/">我的博客链接</a> </div> </div> <p>普通信息，不打印</p> <div class="print-item"> <p>打印部分二</p> </div> <p>啦啦啦~~，不打印，我是捣乱的~</p> </div>
2.js
$(".print-btn").on("click",function(){
var printVal='';
$(".print-item").each(function(){
printVal +=$(this).html();
});
if(printVal==""){
swal("请勾选您要打印的内容");
}else{
pulsePrint(printVal);
}
})
//这里的printmsg获取的是html内容，注意打印页面样式调整是在<style></style>中进行
function pulsePrint(printmsg){
var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}</style><body>";
var footstr="</body></html>";
var newstr=printmsg;
var oldstr=document.body.innerHTML;
var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
myWindow.document.body.innerHTML=headstr+newstr+footstr;
myWindow.print();
setTimeout(function(){
myWindow.close();
},300);
return false;
}
三、打印强制分页，自己设定到某个地方打印的时候直接分页
利用 css
{ page-break-after: always; /*在元素后插入分页符。*/ }
{ page-break-before: always; /*在元素前插入分页符。*/ }
举例如下：
1.直接在html页通过行内样式设置,js不变
<!--直接在上面第二个案例的html中修改，js不变，给div加了style="page-break-before:always;"--> <div class="wrap"> 我是wrap <div class="print-item"> <p>打印部分一</p> <div style="page-break-before:always;"> <strong>粗体</strong> <a href="http://www.cnblogs.com/kangby/">我的博客链接</a> </div> </div> </div>
2.js中 headstr变量中的<style></style>中加了一个class名，html直接引用改class名。(注意：要在打印页面写入该class样式)
(1)、html，仍然在案例二代码基础上修改
<div class="wrap"> 我是wrap <div class="print-item"> <p>打印部分一</p> <div class="pageBreak"> <strong>粗体</strong> <a href="http://www.cnblogs.com/kangby/">我的博客链接</a> </div> </div> </div>
(2)、js，案例二代码上修改，点击事件不变，只是在函数内加了一个class 的样式
//这里的printmsg获取的是html内容，注意打印页面样式调整是在<style></style>中进行 function pulsePrint(printmsg){ var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}.pageBreak{page-break-before: always;}</style><body>"; var footstr="</body></html>"; var newstr=printmsg; var oldstr=document.body.innerHTML; var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no'); myWindow.document.body.innerHTML=headstr+newstr+footstr; myWindow.print(); setTimeout(function(){ myWindow.close(); },300); return false; }
关于打印的css详情，可参考 CSS 打印属性（Print）
四、window.print()图片打印
1、html中的图片地址要注意 路径问题，最好是绝对路径，举例如下
<div class="print-item"> <p>打印部分一</p> <div class="pageBreak"> <strong>粗体</strong> <img src="file:///D:/text/img/logo.png" alt=""> <a href="http://www.cnblogs.com/kangby/">我的博客链接</a> </div> </div>
2、js 中打印时 要注意图片的加载问题
如果新窗口的内容中存在图片而打印中图片未出来时，说明图片路径已经是正确的，要判断图片加载。
额，下面是一个偷懒的小办法，其他的可自行百度或者参考下面的链接
//在案例二js代码基础上改动 //当打印内容中只有一张图片或者最后一张图片最大的时候可以用用，具体情况自行分析使用 function pulsePrint(printmsg){ var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}</style><body>"; var footstr="</body></html>"; var newstr=printmsg; var oldstr=document.body.innerHTML; var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no'); myWindow.document.body.innerHTML=headstr+newstr+footstr; var imgNum = myWindow.document.getElementsByTagName("img").length; if(imgNum>0){ myWindow.document.getElementsByTagName("img")[imgNum -1].onload = function(){ setTimeout(function(){ myWindow.print(); },300); setTimeout(function(){ myWindow.close(); },600); } }else{ myWindow.print(); setTimeout(function(){ myWindow.close(); },300); } return false; }