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...
自动分页 通过设置style="page-break-after:always"可以实现打印分页 现在就是需要按class="poetry"的div进行分割,考虑到每张A4纸高度固定,所以通过判断每个poetry div的高度累加,当加上某个div的高度后,大于纸张高度时,就给上一个div加上style="page-break-after:always" 实现 const PAGE_HEIGHT = 1124 // A4纸...
letlableListID = childNodes; for(leti =0; i < lableListID.length; i++) { letmultiple =Math.ceil((lableListID[i].offsetTop+ lableListID[i].offsetHeight) / pageHeight); if(this.isSplit(lableListID, i, multiple * pageHeight)) { letdivParent = lableListID[i].parentNode;// 获取该...
前端环境:Vue2 打印插件:vue-print-nb Node版本:v16.20.2 第一步、安装依赖 npm install vue-print-nb 1. 第二步、引入插件 /** * main.js / import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) 1. 2. 3. 4.
在需要打印的vue页面里,写入以下样式: <style media="print"> @page { size: auto; margin: 3mm; } html { background-color: #ffffff; height: auto; margin:
page-break-after:always; 1. 例如,给section标签添加此样式,然后使用section标签实现分页 section{ page-break-after:always; } 1. 2. 3. 第一页的内容 第二页的内容 第三页的内容 <el-buttontype="primary"v-print="'printConfig'">打印...
@media print { .page-break-before { page-break-before: always; } .page-break-after { page-break-after: always; } } 然后,在你的 Vue 组件中,将需要分页的元素添加相应的类。 调整内容布局:确保你的内容在打印视图中是适当布局的。这可能意味着需要调整边距、字体大小、行高等,以确保内容能够适合打印...
有多个单据时,可以循环展示,在单据内容的最外层的div设置样式page-break-after:always,即可在打印时自动分页 print5.png print6.png print7.png 5、打印功能完整代码(安装好包,导入包后,可直接复制粘贴使用) <template><el-button type="primary"@click="print">打印</el-button><el-dialog title="":visible...
//必须加id 采购订单 日期姓名地址 {{item.date}} {{item.name}} {{item.address}} <el-button type="primary" v-print="printObj">打印</el-button> //绑定v-print 4.data中 data() {