vue-print-nb只打印一页解决方法示例
作者：夏茗星
这篇文章主要为大家介绍了vue-print-nb只打印一页解决方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
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"/>'
},第四步： 最最最最关键的一步，也就是解决只能打印一页的问题，就调整样式
@media print {
@page {
size: auto;
}
body, html,div{
height: auto!important;
}
}
</style>这个div啊设置成高度自适应，全部数据都能打印出来了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。。。。，困扰我多天的问题终于解决了
以上就是vue-print-nb只打印一页解决方法示例的详细内容，更多关于vue-print-nb打印的资料请关注脚本之家其它相关文章！