js利用window.print实现局部打印方法

时间 2019-12-08

标签利用 window.print window print 实现局部打印方法栏目 JavaScript 繁體版

原文原文链接

1、局部打印，打印单独的一部份内容css

方法：为要打印的内容设置单独的id名，新开窗口并打印。html

举例以下：ide

一、html函数

<div id="pulPrint">  
  我是要打印的内容
</div>
<div class="btn btn-primary print-btn">打印</div>

二、jsthis

$(".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;
}

2、选中多块区域并打印，举例以下spa

1.html.net

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

$(".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;
}

3、打印强制分页，本身设定到某个地方打印的时候直接分页code

利用 csshtm

{ 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）

4、window.print()图片打印

一、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>

View Code

二、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;
}

View Code

也可参考 js打印window.print()图片打印