1.安装控件 vue-print-nb
安装打印控件
npm install vue-print-nb --save
2.全局注册插件
// 打印控件
import Print from 'vue-print-nb'
Vue.use(Print)
3.具体使用
html代码
<div slot="footer" class="dialog-footer">
<el-button v-print="printMe" type="primary">打印</el-button>
</div>
<div id="printDiv">
注意:id必须设置,否则打印时找不到
这里是打印的内容,可以使用elementui的布局也可以直接使用table或其他控件,看个人喜好
</div>
<div>
其他显示内容,不需要打印的部分
</div>
js部分
在data中定义
printMe: {
id: 'printDiv',//要打印部分的div的id
popTitle: '中心调拨单',//打印单据时顶部的名称
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printDiv{ width: 100%; } <style>'//根据需要可以设置打印时候的特殊样式
},
以上部分便可完成需要的打印