vue-print-nb只打印一页解决方法示例

npm install vue-print-nb --save

//全局引入在main.js文件里
import Print from 'vue-print-nb'
Vue.use(Print)
//局部引入是在组件里
import Print from 'vue-print-nb'

directives: {
    Print
  },

<template>
  <v-simple-table id="printTable">
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Name
          </th>
          <th class="text-left">
            Calories
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in desserts"
          :key="item.name"
        >
          <td>{{ item.name }}</td>
          <td>{{ item.calories }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<v-btn depressed primary v-print="printObj">{{打印}}</v-btn>

printObj: {
        id: 'printTable',
        // extraCss: 'https://www.google.com,https://www.google.com'
        // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },

@media print {
  @page {
    size: auto;
  }
  body, html,div{
    height: auto!important;
  }
}
</style>