在onPrinted回调函数中,我们可以处理打印完成后的逻辑。如果需要实现分页打印,我们可以在调用print()函数时设置pageBreak参数为’auto’或’true’,这将使Vue3-Print-NB自动根据内容分割页面并分别进行打印。需要注意的是,Vue3-Print-NB插件依赖于浏览器的打印功能,因此在使用该插件时,必须确保目标浏览器支持打印功能。
if (this.isSplit(lableListID, i, multiple * pageHeight)) { let divParent = lableListID[i].parentNode; // 获取该div的父节点 let newNode = document.createElement('div'); newNode.className = 'emptyDiv'; newNode.style.background = '#ffffff'; let _H = multiple * pageHeight - (lable...
//必须加id 采购订单 日期姓名地址 {{item.date}} {{item.name}} {{item.address}} <el-button type="primary" v-print="printObj">打印</el-button> //绑定v-print 4.data中 data() {
工单数:{{ data.length }},工单数量:{{ data.reduce((sum, data) => sum + data.workOrderQuantity, 0) }},已生产数量:{{ data.reduce((sum, data) => sum + data.producedQuantity, 0) }},待生产数量:{{ data.reduce((sum, data) => sum + data.pendingQuantity, 0) }} <el-table bord...
@media print { .page-break-before { page-break-before: always; } .page-break-after { page-break-after: always; } } 然后,在你的 Vue 组件中,将需要分页的元素添加相应的类。 调整内容布局:确保你的内容在打印视图中是适当布局的。这可能意味着需要调整边距、字体大小、行高等,以确保内容能够适合打印...
page-break-after:always; 例如,给section标签添加此样式,然后使用section标签实现分页 section{ page-break-after: always; } 第一页的内容 第二页的内容 第三页的内容 <el-button type="primary" v-print="'printConfig'">打印</el-button> 移除末尾的空白页 若打印时,末尾总是出现空白页,...
在使用vue-print-nb库进行分页打印时,可以通过多种方式来实现。以下是几种常见的方法及其实现步骤: 1. 使用page-break-after样式实现分页 这是最简单直接的方法,通过在需要分页的位置添加page-break-after: always;样式来实现。 示例代码: html <template> <div> <button v-print="'printArea...
通过设置style="page-break-after:always"可以实现打印分页 现在就是需要按class="poetry"的div进行分割,考虑到每张A4纸高度固定,所以通过判断每个poetry div的高度累加,当加上某个div的高度后,大于纸张高度时,就给上一个div加上style="page-break-after:always" ...
page-break-after:always; 1. 例如,给section标签添加此样式,然后使用section标签实现分页 section{ page-break-after:always; } 1. 2. 3. 第一页的内容 第二页的内容 第三页的内容 <el-buttontype="primary"v-print="'printConfig'">打印...
在需要打印的vue页面里,写入以下样式: <style media="print"> @page { size: auto; margin: 3mm; } html { background-color: #ffffff; height: auto; margin: