vue-print-nb 插件打印有两页
时间: 2023-12-31 09:21:58 浏览: 120
vue-print-nb 兼容低版本浏览器
-print-nb插件是一个Vue.js的插件,可以实现在Vue项目中的打印功能。如果打印出来的内容超过一页,可以通过CSS样式来控制分页。具体方法如下:
1. 在需要打印的元素上添加CSS样式`page-break-after: always;`,这样就可以控制每个元素在打印时分页。
2. 如果需要在打印时隐藏某些元素,可以使用CSS样式`@media print { ... }`,在其中添加需要隐藏的元素的CSS样式。
下面是一个示例代码,可以实现在打印时将内容分为多页:
```html
<template>
<div>
<div class="print-content">
<!-- 打印内容 -->
</div>
</div>
</template>
<script>
export default {
mounted() {
// 打印
this.$print('.print-content');
}
}
</script>
<style>
/* 分页样式 */
.print-content {
page-break-after: always;
}
/* 隐藏元素样式 */
@media print {
.no-print {
display: none;
}
}
</style>
```
阅读全文