js 实现自定义打印模板

1.创建一个print.js文件 

//打印拣货单
import { tableStyle } from './printStyle'
export const printToTable = (data, callBack) => {
    //初始化打印内容
    console.log(data)
    let printNum = 1
    const imgPath = 'data:image/png;base64,' + data.barCode
    const img = new Image()
    img.src = imgPath
    img.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 + 1
            if (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.使用

4.效果