vue项目中的打印问题---vue-print-nb

前言： 最近之前的vue项目中，文章详情页面的打印功能出了问题，之前用的是vue-print-nb，现在有的客户反馈出现打印页面不完整的问题（客户用的国产的浏览器），所以想换一种写法处理这个问题，发现js原生就有打印的方法print()

下面记录下之前用的和现在的方法

之前用的方法：vue-print-nb

1. 安装

   npm install vue-print-nb --save
   

2. 安装好以后在main.js文件中引入

   import Print from 'vue-print-nb'
   Vue.use(Print);  //注册
   

3. 使用

   <div id="printTest" >
      <p>明月照于山间</p> 
   </div>
   <button v-print="'#printTest'">打印</button>
   

现在用方法：print()：用于打印当前窗口的内容

• 打印整个页面

   function dayin(){
     window.print();  
   }
  

• 打印部分页面

  function dayin(){
    bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
    sprnstr="<!--startprint-->";//设置打印开始区域  
    eprnstr="<!--endprint-->";//设置打印结束区域  
    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html 
    window.document.body.innerHTML=prnhtml;  
    window.print();  
  }
  

• 关闭打印框后，打开打印框前操作

  window.onbeforeprint = function() { 打印之前要做的操作 };
  window.onafterprint = function() { 打印之后要做的操作 };