vue打印功能

先下载  https://github.com/xyl66/vuePlugs_printjs 

在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下，然后操作如下

在main.js中引入

import Print from '@/plugs/print'

Vue.use(Print) // 注册

vue组件中

<template>

<section ref="print">

 打印内容

 <div class="no-print">不要打印我</div>

</section>

</template>

注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

指定不打印区域

 方法1. 添加no-print样式类

?

1	<div class="no-print">不要打印我</div>

方法2. 自定义类名

?

1 2	<div class="do-not-print-me-xxx">不要打印我</div> this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

提示，github上有一个错误如下，避免踩坑，($ref 会报错，print undefind ;  改为 $refs 就好了)

 

执行方法：this.$print(this.$refs.print) 

实际代码：

<template>

<div class="pring">

<div ref="print"

style="background:red;">

<p>葫芦娃，葫芦娃</p>

<p>一根藤上七朵花 </p>

<p>小小树藤是我家 啦啦啦啦 </p>

<p>叮当当咚咚当当　浇不大</p>

<p> 叮当当咚咚当当 是我家</p>

<p> 啦啦啦啦</p>

<p>...</p>

</div>

 

<!-- <section ref="print">

打印内容

<div class="no-print">不要打印我</div>

</section> -->

<button @click="print">Print local range</button>

 

</div>

</template>

 

<script>

export default {

data() {

return {}

},

mounted() {},

methods: {

print() {

this.$print(this.$refs.print) // 使用

}

},

 

created() {}

}

</script>

<style lang='less'>

</style>