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

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

上一篇:文件和目录的创建、删除以及复制


下一篇:NB-IOT 86盒单火线开关型室温采集器电源板 单火线开关取电方案 NBIOT单火线室温采集器