vue页面使用v-print指令打印表格表单的几种方法,包括页眉标题自定义设置

页面效果:

页尾效果：

打印预览页面:

步骤:

1.安装vue-print-nb

2.在main.js里面注册

import Print from 'vue-print-nb'

Vue.use(Print)

3.在页面.vue代码中定义打印范围和打印按钮，我这里是以id="main-div"这个div为范围进行打印

 <div>

        <div id="main-div" >
              <table >

              </table >

        </div>

         <el-button ref="printClick" type="primary" v-print="printObj">这是打印按钮</el-button>

</div>

4.在data里面设置printObj和页眉标题

data() {
      return {
        printObj: {
          id: '#main-div', // 打印范围
          popTitle: '机动战士管理系统' // 页眉标题   
        },

5.运行起来即可实现打印效果,左侧是打印的预览图，右边的打印设置，在目标打印机选项中还可以选择另存为pdf。

这里演示的第一种写法，稍微繁杂一些，但功能细节更多，第一种方法不需要在data里面设置printObj和页眉标题

第一种

<el-button v-print="'#main-div'" type="primary" popTitle="aaaa">第一种打印方法按钮</el-button>

第二种

 <el-button ref="printClick" type="primary" v-print="printObj">这是打印按钮</el-button>