vue-print-nb打印只能打印一页？（已解决）

经我研究多天，因为我是从接口拿的数据，数据量会很多，但是vue-print-nb这个插件只打印了21条表格数据，又尝试了print.js的方法，依旧不行，达不到我想要的效果，然后我继续研究了vue-print-nb这个打印方法。。。

第一步：vue项目得下个依赖包，命令是
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
  },

第三步： 使用

给你打印的内容加上一个id,例如打印表格就是

<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>

data()里面定义打印的方法（注：是在data里面，不是methods）

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

第四步： 最最最最关键的一步，也就是解决只能打印一页的问题，就调整样式

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

这个div啊设置成高度自适应，全部数据都能打印出来了，呀哈~~~，困扰我多天的问题终于解决了

泪牛满面~~~