vue页面打印可自动分页

一、最简单的方法
强制分页

<div style="page-break-after: always;"></div>

二、复杂一点的方法:
1.可填写打印张数,自动分页,在浏览打印中设置纸张大小、边距及缩放调整位置,使打印页面居中。
缺点:打印分页不稳定,没有自适应,需自己调整大小位置
如图所示
《vue页面打印可自动分页》
《vue页面打印可自动分页》
2.详细代码如下

<!-- 标签弹窗 -->
	<Modal width="250" :mask-closable="false" v-model="modalShow" title="标签打印">
      <Table stripe :columns="modal_title" :data="modal_data"></Table>
	  <div slot="footer"><Button type="primary" @click="close">关闭</Button></div>
    </Modal>
<!-- 标签打印 -->
	<Modal width="420" v-model="modalPrintShow" title="送货单">
		<div id="printContent" style="width:420px;">
			<div v-for="(item,i) in arrList">
				<div class="flex-c">
					<div style="font-size:15px;color: #000;font-family:'黑体';font-weight:500;"><span>浙江金华</span><span style="margin-left:10px;">物料标签卡</span></div>
					<vue-qr :text="`${modalNameList.materialNum}##${modalNameList.qty}##${modalNameList.suppCode}##${modalNameList.billNum}##${modalNameList.entryId}`" :size="45" :margin="5"></vue-qr>
				</div>
					<div style="margin:0px 0px 10px 0px;display:flex;justify-content:center;">
						<table border="1" class="printTable">
						<tr>
							<td>供应商</td>
							<td colspan="5">{ { modalNameList.supp}}</td>
						</tr>
						<tr>
							<td>单据编号</td>
							<td colspan="5">{ { modalNameList.billNum}}</td>
						</tr>
						<tr>
							<td>品名</td>
							<td colspan="5">{ { modalNameList.materialName}}</td>
						</tr>
						<tr>
							<tr>
							<td>物料编码</td>
							<td colspan="5">{ { modalNameList.materialNum}}</td>
						</tr>
							<td>交货日期</td>
							<td style="width:110px;" colspan="2">{ { modalNameList.deliveryDate}}</td>
							<td>数量</td>
							<td style="width:110px;" colspan="2">{ { modalNameList.qty}}</td>
						</tr>
						<tr>
							<td>申报部门</td>
							<td colspan="2">{ { modalNameList.applyDeptName}}</td>
							<td>申请人</td>
							<td colspan="2">{ { modalNameList.applyPersonName}}</td>
						</tr>
						<tr>
							<tr>
							<td>备注</td>
							<td colspan="5">{ { modalNameList.remark}}</td>
						</tr>
						</table>
					</div>
				</div>
			</div>
			<div slot="footer"></div>
    </Modal>
<script>
import '@/assets/js/jquery-vendor'// 方法 2
import 'jQuery.print' // 方法 2
import printHtml from '@/components/print.js'//引入封装打印的文件
import VueQr from 'vue-qr';//引入二维码
export default{ 
	components: { 
		VueQr
	},
}
data(){ 
	return{ 
		arrList:[],
		modalNameList:{ },
		modal_title:[{ title: "打印张数",width: 120,
        render: (h, params) => { 
          let arr1 = [
            h("InputNumber", { 
              props: { 
				'active-change':false,
                value: 1,
				min:1,
              },
              on: { 
                input: (val) => { 
                  this.modal_data[params.index].boxNumber = val;
				  params.row.boxNumber = val
                },
              },
            }),
          ];
          return h("div", arr1);
        },
      },
      { 
          title: "操作",
          width: 80,
          fixed: "right",
          render: (h, params) => { 
            let arr1 = [
              h(
                "Button",
                { 
                  props: { 
                    type: "primary",
                    size: "small",
                  },
                  on: { 
                    click: () => { 
						let d = params.row // 单行数据
						this.bqPrint(d)
					}
                  },
                },
                "打印"
              ),
            ];
            return h("div", arr1);
          },
        },
      ],
	}
}
methods(){ 
	//打印
	bqPrint(d){ 
			this.arrList = []//分页的空数组,里面有几个对象就有几页
			this.modalNameList = d
			let num = d.boxNumber//num是填写的打印页数
			let obj = { num:num}
			for (let i = 0; i < num; i++) { 
				this.arrList.push(obj)
			}
			// this.modalPrintShow = true
			this.$nextTick(() => { //this.$nextTick是强制刷新页面,防止打印的内容为空
				setTimeout(function () { //定时器延时是等待页面数据刷新完在打印
					let newstr = document.getElementById("printContent").innerHTML//newstr为打印的页面
					printHtml(newstr)//调用引入的文件方法printHtml
				},500)
			})
		},
}
</script>

3.printHtml 封装文件

export default function printHtml (html) { 
  let style = getStyle()
  let container = getContainer(html)
  document.body.appendChild(style)
  document.body.appendChild(container)
  getLoadPromise(container).then(() => { 
    window.print()
    document.body.removeChild(style)
    document.body.removeChild(container)
  })
}

// 设置打印样式
function getStyle () { 
  let styleContent = `#print-container { display: none; } @media print { body > :not(.print-container) { display: none; } html, body { margin: 0 0.2cm; display: block !important; height:auto; } #print-container { display: block; } @page { margin: 0.25cm 0; } }`
  let style = document.createElement('style')
  style.innerHTML = styleContent
  return style
}

// 清空打印内容
function cleanPrint () { 
  let div = document.getElementById('print-container')
  if (div) { 
    document.querySelector('body').removeChild(div)
  }
}

// 新建DOM,将需要打印的内容填充到DOM
function getContainer (html) { 
  cleanPrint()
  let container = document.createElement('div')
  container.setAttribute('id', 'print-container')
  container.innerHTML = html
  return container
}

// 图片完全加载后再调用打印方法
function getLoadPromise (dom) { 
  let imgs = dom.querySelectorAll('img')
  imgs = [].slice.call(imgs)

  if (imgs.length === 0) { 
    return Promise.resolve()
  }

  let finishedCount = 0
  return new Promise(resolve => { 
    function check () { 
      finishedCount++
      if (finishedCount === imgs.length) { 
        resolve()
      }
    }
    imgs.forEach(img => { 
      img.addEventListener('load', check)
      img.addEventListener('error', check)
    })
  })
}

    原文作者:你离优秀差多少
    原文地址: https://blog.csdn.net/weixin_45891332/article/details/121968619
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞