html前端打印

var newstr = document.getElementById("picOutDiv").innerHTML;//得到需要打印的元素HTML
var oldstr = document.body.innerHTML;//保存当前页面的HTML
document.body.innerHTML = newstr; $(".pic").offset({top:0,left:0});
$(".pic").width("100%"); 
$(".pic").height("100%"); 
window.print(); 
//document.body.innerHTML = oldstr; 
location.reload();

第一种打印方法：将需要打印html取出来，然后再将body的html放到变量里备用。这时可以将需要打印的html放到body中然后调整位置大小，进行打印。最后再将保存在变量里的html放回body中。这样做，body中如果引入了js，会使页面的js失效。所以不能直接放回，要直接重新加载。

var printHtml = document.getElementById("picOutDiv").innerHTML;
var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
wind.document.body.innerHTML = printHtml;
wind.document.getElementsByClassName("pic")[0].style.width = "100%";
wind.document.getElementsByClassName("pic")[0].style.height = "100%";
wind.print();

第二种打印方法：为了避免出现第一种方法的js失效或者重新加载，我们将再打开一个窗口来实现打印。在新的窗口中填充要打印的元素。这种方法打印的效果会有问题，高度没有100%。图片高度只有一小半。

var newstr = document.getElementById("picOutDiv").innerHTML;//得到需要打印的元素HTML
$('body').children().hide();
var imgDom = $(newstr);
$('body').append(imgDom);
$(".pic").offset({top:0,left:0});
$(".pic").width("100%");
$(".pic").height("100%");
window.print();
$('body').children().show();
imgDom.remove();

第三种打印方法：为了避免上两种方法的缺陷，我们采用隐藏body子元素的方法。将body子元素进行隐藏，打印后再显示。