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:10
·
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>
更多推荐
已为社区贡献6条内容
所有评论(0)