Vue打印页面

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>'//根据需要可以设置打印时候的特殊样式
      },

以上部分便可完成需要的打印