vxe-table 打印出货单、自定义打印单据

在开发 ERP 或内部系统时，经常会遇到需求打印出货单，接下来分享如何在 vxe-table 灵活的使用打印功能，非常简单就能实现能自定义的出货单打印。

页面效果

页面上的打印区用蓝色边框标注了，方便看出效果

点击打印后，完整的将指定的区域打印出来，也可以添加自定义内容，非常灵活。
不仅支持去掉页头、页尾，自定义标题、分页等等，灵活自定义程度非常高

<template>
  <div>
    <vxe-button @click="printEvent">点击打印</vxe-button>

    <div style="border: 1px solid #409eff; padding: 16px">
      <div ref="topElRef">
        <div style="margin-bottom: 8px;">
          <div style="display: inline-block;width: 100%;">
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">商品名称：Vxe 企业授权</div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货单号：X2665847132654</div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货日期：2024-12-01</div>
          </