vue 打印指定的内容

//第一种

npm install vue-easy-print --save

要打印的页面引入  import vueEasyPrint from "vue-easy-print"

组件注册

components: {

vueEasyPrint,

},

使用

<vueEasyPrint ref="easyPrint" tableShow>

<img class="aa" src="./icon/miandan.jpg" alt="" /> //打印内容

</vueEasyPrint>

打印按钮//

<el-button @click="print">打印3</el-button>  

方法：

print(){

this.$refs.easyPrint.print()

}

//第二种

npm install vue-print-nb --save

// 1. 全局挂载 main.js
import Print from 'vue-print-nb'
Vue.use(Print)
 
// or
 
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}

使用

<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="print">打印</el-button>
 
<!--//需要打印的页面-->
<div id="printMe" ref="print">
      
            <p>什么玩意儿</p>
        </div>
</div>