一、最简单的方法
强制分页
<div style="page-break-after: always;"></div>
二、复杂一点的方法:
1.可填写打印张数,自动分页,在浏览打印中设置纸张大小、边距及缩放调整位置,使打印页面居中。
缺点:打印分页不稳定,没有自适应,需自己调整大小位置
如图所示
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)
})
})
}