js 实现自定义打印模板

1.创建一个print.js文件

//打印拣货单
import { tableStyle } from './printStyle'
export const printToTable = (data, callBack) => {//初始化打印内容console.log(data)let printNum = 1const imgPath = 'data:image/png;base64,' + data.barCodeconst img = new Image()img.src = imgPathimg.onload = () => {console.log('=====')// 打印的表格内容const tableContent = ` <div class="container"><div class="container_left"><div class="item"><span class="label">波次号:</span><span>${data.waveNo||''}</span></div><div class="item"><span class="label">波次类型:</span><span>${data.waveType||''}</span></div><div class="item"><span class="label">库位总数:</span><span>${data.locNum||''}</span></div><div class="item"><span class="label">订单总数:</span><span>${data.orderQty||''}</span></div><div class="item"><span class="label">商品件数:</span><span>${data.skyQty||''}</span></div><div class="item"><span class="label">承运商:</span><span>${data.carrierName||''}</span></div><div class="item"><span class="label">货主:</span><span>${data.customerName||''}</span></div><div class="item"><span class="label">打印时间:</span><span>${data.pickListPrintTime||''}</span></div></div><div class="container_right"><img class="img"  src="${imgPath}" alt="条形码" /></div></div><div class="table"><table ><thead><tr><th rowspan="2" class="w-60">序号</th><th rowspan="2" class="w-120">货品名称</th><th rowspan="2" class="w-60">应拣数量</th><th rowspan="2" class="w-60">拣货库位</th><th rowspan="2" class="w-120">货品编码</th><th rowspan="2" class="w-120">货品条码</th><th colspan="2" class="w-120">分拣格</th></tr><tr><th class="w-60">格号</th><th class="w-60">数量</th></tr></thead><tbody>${data.oubWavePickSkuInfoVOList.map((item) => `<tr><td class="w-60" rowspan="${item.inventorySlotList.length}">${item.sortNo||''}</td><td class="w-120" rowspan="${item.inventorySlotList.length}">${item.skuName||''}</td><td class="w-60" rowspan="${item.inventorySlotList.length}">${item.pickedNum||''}</td><td class="w-60" rowspan="${item.inventorySlotList.length}">${item.loc||''}</td><td class="w-120" rowspan="${item.inventorySlotList.length}">${item.sku||''}</td><td class="w-120" rowspan="${item.inventorySlotList.length}">${item.barCode||''}</td><td class="w-60">${item.inventorySlotList[0].sortingNo||''}</td><td class="w-60">${item.inventorySlotList[0].skuQty||''}</td></tr>${item.inventorySlotList.splice(1).map(i => `<tr><td class="w-60">${i.sortingNo||''}</td><td class="w-60">${i.skuQty||''}</td></tr>`).join('')}`).join('')}</tbody></table></div><div class="footer">合计:${data.skyQty}箱</div>`// 创建一个新的窗口用于打印// const newWindow = window.open('', '_blank')//创建iframe形式let iframe = document.createElement('iframe');//不写也没什么影响iframe.style.height = '0'iframe.style.width = '0'iframe.style.visibility = 'hidden'iframe.style.position = 'absolute'iframe.style.top = '0'document.body.appendChild(iframe);const newWindow = iframe.contentWindow;//写入数据newWindow.document.write('<html lang="en"><head><title>拣货单</title>')// 打印的表格样式newWindow.document.write(tableStyle)newWindow.document.write('</head><body>')// 将表格内容写入新窗口中newWindow.document.write(tableContent)newWindow.document.write('</body></html>')//监听打印或者取消事件的回调=》不能区分是否点击了打印const afterPrint = () => {console.log('打印后');printNum = printNum + 1if (printNum == 2) {callBack}}if (newWindow.document.matchMedia) {let mediaQueryList = newWindow.document.matchMedia('print');mediaQueryList.addListener((mql) => {console.log(mql)if (mql.matches) {beforePrint();} else {afterPrint();}});}newWindow.document.onafterprint = afterPrint;newWindow.document.close();newWindow.focus();newWindow.print();setTimeout(() => {document.body.removeChild(iframe);}, 3000);// // 打印新窗口中的内容// newWindow.print()// // 关闭新窗口// newWindow.close()}img.onerror = () => {console.log('加载失败')}
}

2.创建一个printStyle.js为打印内容填写样式

export const tableStyle = `
<style>* {padding: 0;margin: 0;}.print-timestamp {display: none;}.container {display: flex;width: 100%;margin: 10px auto;justify-content: space-between;}.container_left {display: flex;flex-wrap: wrap;width: calc(100% - 220px);}.container_right {width: 400px;}.img {width: 400px;height: 100px;display: block;}.pageLine {page-break-before: auto;page-break-after: always;}.item {min-width: 33.3%;}.footer {font-size: 18px;font-weight: bold;text-align: center;margin-top:4px;}table {width: 100%;border-collapse: collapse;}td {border: 1px solid black;text-align: center;font-size: 14px;}.w-60 {width: 80px;}th {border: 1px solid black;color: #000;}.print-title {font-size: 28px;font-weight: bold;text-align: center;margin-bottom: 20px;margin-top: 2px}
</style>`

3.使用