分享 vxe-table 實現列印出貨單、自定義列印單據

可不简单發表於2024-11-21

在公司開發列表時，經常會遇到需求列印出貨單，接下來分享如何在 vxe-table 靈活的使用列印功能，非常簡單就能實現能自定義的出貨單列印。

安裝

npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3

// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...

頁面效果

頁面上的列印區用藍色邊框標註了，方便看出效果

點選列印後，完整的將指定的區域列印出來，也可以新增自定義內容，非常靈活。
不僅支援去掉頁頭、頁尾，自定義標題、分頁等等，靈活自定義程度非常高

<template>
  <div>
    <vxe-button content="點選列印" @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>
          </div>
          <div style="display: inline-block;width: 100%;">
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收貨姓名：小徐</div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收貨地址：火星第七區18號001</div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">聯絡電話：10086</div>
          </div>
        </div>
      </div>

      <vxe-table
        border
        ref="tableRef"
        height="300"
        :print-config="{}"
        :data="tableData">
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="名稱"></vxe-column>
        <vxe-column field="code" title="編碼"></vxe-column>
        <vxe-column field="num" title="數量"></vxe-column>
        <vxe-column field="price" title="價格"></vxe-column>
        <vxe-column field="taxRate" title="稅率"></vxe-column>
      </vxe-table>

      <div ref="bottomElRef">
        <div style="margin-top: 30px;text-align: right;">
          <div style="display: inline-block;width: 100%;">
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;"></div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">建立人：小徐</div>
            <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">建立日期：2024-12-01</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-table'

export default {
  data () {
    const tableData = [
      { id: 10001, name: '篩選外掛', code: 'T1', price: 1200, num: 1, taxRate: '3%' },
      { id: 10002, name: '區域選取外掛', code: 'T2', price: 16840, num: 3, taxRate: '3%' },
      { id: 10003, name: '單元格選取外掛', code: 'T3', price: 8460, num: 3, taxRate: '3%' },
      { id: 10004, name: 'Excel 篩選外掛', code: 'T4', price: 980, num: 2, taxRate: '3%' },
      { id: 10005, name: '零程式碼平臺模板', code: 'T5', price: 23199, num: 5, taxRate: '3%' },
      { id: 10006, name: '後臺管理系統模板', code: 'T6', price: 899, num: 7, taxRate: '3%' },
      { id: 10007, name: '低程式碼設計器外掛', code: 'T7', price: 1688, num: 4, taxRate: '3%' },
      { id: 10008, name: '視覺化拖拽外掛', code: 'T8', price: 1299, num: 4, taxRate: '3%' }
    ]
    return {
      tableData
    }
  },
  methods: {
    async printEvent () {
      const $table = this.$refs.tableRef
      if ($table) {
        const printRest = await $table.getPrintHtml()
        const topEl = this.$refs.topElRef
        const bottomEl = this.$refs.bottomElRef
        const topHtml = topEl ? topEl.innerHTML : ''
        const bottomHtml = bottomEl ? bottomEl.innerHTML : ''
        VxeUI.print({
          title: '出貨單據',
          pageBreaks: [
            // 第一頁
            {
              bodyHtml: topHtml + printRest.html + bottomHtml
            }
          ]
        })
      }
    }
  }
}
</script>

https://gitee.com/xuliangzhan/vxe-table

相關文章