一、安装vue-print-nb:
npm install vue-print-nb --save
二、引入插件:
import Print from 'vue-print-nb' Vue.use(Print);
三、直接使用:
<div id="printTest" ><p>这里面是要打印的内容</p></div><button v-print="'#printTest'">打印</button>
效果如图:
image.png
如果是想循环打印数据并强制分页:
<div>
<div id="printTest" v-for="(item, index) in materialList" >
<div v-if="index!==0" style="page-break-after:always"></div>
<p>这里面是要打印的内容</p>
</div>
</div>
<button v-print="'printObj'">打印</button>
<script>
data() {
return {
printObj: {//打印
id: "printMe",
popTitle: "打印模板",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
openCallback (vue) {},
closeCallback (vue) {},
},
</script>