打印插件:vue-print-nb

一.使用步骤

作用:打印指定dom

1.使用:

安装 yarn add vue-print-nb或者 npm i  vue-print-nb

2.导入:

在main.js导入  import Print from 'vue-print-nb'

3.注册:

Vue.use(Print)

4.使用

在指定dom加上id  id='xxx'

在按钮上 v-print="{id:'xxx'}"

二.实际操作

代码：

<template>

    <div class="box">
      <div class="box1">
      <h1>小池</h1>
      <span>[作者] 杨万里</span>
      <span>[朝代] 宋</span>
      <ul>
        <li>泉眼无声惜细流</li>
        <li>树阴照水爱晴柔</li>
        <li>小荷才露尖尖角</li>
        <li>早有蜻蜓立上头</li>
      </ul>
            </div>
    </div>

</template>

<script>
export default {
  name: '',
  methods: {
  }
}
</script>

<style   scoped>
li{
  list-style: none;
}
.box{
  text-align: center;
  width: 800px;
  height: 500px;
  margin: 0 auto;
  background: pink;
}
.box1{
  padding-top: 100px;
}

</style>

视图:

 

只打印古诗

(1)下载

 

(2)在main.js中导入,并且通过Vue.use进行注册

 

 (3)使用

(4)结果

 

 

 

 这样就实现了精确的打印。