vue实现打印多页

1.安装打印插件vue-print-nb

安装 npm install vue-print-nb --save

在main.js文件中注册
import Print from 'vue-print-nb'
Vue.use(Print);

2.页面使用

<div id="print">
<div class="page_items" style="width:100%;min-height:1020px;page-break-after: always;">
页面一
<page1 ></page1>
</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面二...</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面三...</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面四...</div>
</div>
<button v-print="'#print'">点击打印</button>

<script>
import page1 from './print/page1.vue';
export default {
components: {
page1
}
}
</script>

页面内容过多自动换页（个人理解是某个页面内容过多，让其换到下一张打印，而不影响后面的内容整张打印）

// 在style中加入page-break-after: always;
<div class="page_items" style="width:100%;min-height:1020px;page-break-after: always;">页面一</div>