一、vue-print-nb
1.安装
npm install vue-print-nb --save
2.main.js中全局引入
import Print from 'vue-print-nb'
Vue.use(Print);
3.页面中使用
3.1.使用id
- template
<div id="printMe" >
<p>打印内容</p>
</div>
<button v-print="'#printMer'">打印</button>
3.2.使用printObj
- template
<button v-print="printObj">Print local range</button>
<div id="printMe" style="background:red;">
<p>葫芦娃，葫芦娃</p>
<p>一根藤上七朵花 </p>
</div>
- script
export default {
data() {
return {
printObj: {
id: "printMe",
popTitle: 'good print',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
};
}
}
缺点：
只能打印可见区域，不能分页打印
二、vuePlugs_printjs
1. 下载插件
插件地址：https://github.com/xyl66/vuePlugs_printjs
image.png
下载print.js后将其放入plugins文件夹下
|--根目录
|--|--src
|--|--|--plugins
|--|--|--|--print.js
2.main.js中全局引入
import Print from '@/plugs/print'
Vue.use(Print) // 注册
3.页面中使用
使用ref
- template
<template>
<div ref="print">
<p>打印内容</p>
<p class="no-print">非打印内容 方法1：添加no-print样式类</p>
<p class="className">非打印内容 方法2：自定义类名</p>
</div>
<button @click="print()">打印</button>
</template>
- script
print(){
this.$print(this.$refs.print,{'no-print':'.className'});
}
参考文档网址：
