两种不同的环境实现打印功能

一.在vue脚手架项目里面

1.安装依赖  npm install vue-print-nb --save

2.在main.js中引入

  import Print from \'vue-print-nb\'

　Vue.use(Print); //注册

3. 在需要打印的地方使用id命名  （必须使用id命名，class命名没有效果）

<div id="tzs">
    <img :src="imgurl" alt="">
</div>


<el-button type="info" icon="el-icon-search" v-print="\'tzs\'">打印</el-button>

4.在点击打印的地方使用 v-print=“需要打印的id名称” 这样就可以实现打印功能了

 

二.在HTML但页面实现打印功能

 

在vue里面下载的依赖在HTML页面就不能使用了，那么在HTML页面如何使用打印功能的？

1.使用window.print （）可以实现打印功能，但是这个是打印整个页面，如果想要打印特定的部分就可以使用下面的方法

在点击打印的时候使用document.getElementById获取到元素，让不需要打印的元素先隐藏，只留下自己想要打印的部分。这样就可以实现打印功能了。如下所示：

<el-button id="btn-main" type="info" icon="el-icon-search" @click="print">打印</el-button>


print(){
       var html_print = document.getElementById(\'img\').style.display = \'none\';
       var html_print = document.getElementById(\'footer-img\').style.display = \'none\';
       var html_print = document.getElementById(\'btn-left\').style.display = \'none\';
       window.print()
var html_print = document.getElementById(\'img\').style.display = \'block\';
       var html_print = document.getElementById(\'footer-img\').style.display = \'block\';
       var html_print = document.getElementById(\'btn-left\').style.display = \'block\';
     }