vue 實現純 web H5 列印功能

可不简单發表於2024-12-10
VueWebH5

vue 實現純 web H5 列印功能

官網：https://vxeui.com/
https://github.com/x-extends/vxe-pc-ui

安裝

npm install vxe-pc-ui@4.3.22 vxe-table@4.9.19

// ...
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-print ref="printRef" custom-layout>
      <img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;">
    </vxe-print>
    <vxe-button @click="printEvent1">直接列印</vxe-button>
    <vxe-button @click="printEvent2">呼叫方法列印</vxe-button>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-pc-ui'

export default {
  data () {
    return {}
  },
  methods: {
    printEvent1 () {
      const $print = this.$refs.printRef
      if ($print) {
        $print.print()
      }
    },
    printEvent2 () {
      VxeUI.print({
        html: `
        <img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;">
        `
      })
    }
  }
}
</script>

自定義頁首

<template>
  <div>
    <vxe-print ref="printRef">
      <template #header>
        <div style="font-size: 20px;padding-top: 20px;text-align: center;">自定義標題222222222</div>
      </template>

      <vxe-print-page-break>
        <div>第一頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>
      <vxe-print-page-break>
        <div>第二頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>
      <vxe-print-page-break>
        <div>第三頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>
    </vxe-print>
    <vxe-button @click="printEvent1">直接列印</vxe-button>
    <vxe-button @click="printEvent2">呼叫方法列印</vxe-button>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
  data () {
    return {}
  },
  methods: {
    printEvent1 () {
      const $print = this.$refs.printRef
      if ($print) {
        $print.print()
      }
    },
    printEvent2 () {
      VxeUI.print({
        headerHtml: '<div style="font-size: 20px;padding-top: 20px;text-align: center;">自定義標題222222222</div>',
        pageBreaks: [
          {
            bodyHtml: `
              <div>第一頁</div>
              <div>內容</div>
              <div>內容</div>
              `
          },
          {
            bodyHtml: `
              <div>第二頁</div>
              <div>內容</div>
              <div>內容</div>
              `
          },
          {
            bodyHtml: `
              <div>第三頁</div>
              <div>內容</div>
              <div>內容</div>
              `
          }
        ]
      })
    }
  }
}
</script>

自定義頁尾和頁數

<template>
  <div>
    <vxe-print ref="printRef" title="標題33">
      <vxe-print-page-break>
        <div>第一頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>
      <vxe-print-page-break>
        <div>第二頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>
      <vxe-print-page-break>
        <div>第三頁</div>
        <div>內容</div>
        <div>內容</div>
      </vxe-print-page-break>

      <template #footer="{ currentPage, pageCount }">
        <div style="font-size: 20px;padding-top: 20px;text-align: center;">
          <span>自定義頁尾，當前頁碼：{{ currentPage }}/{{ pageCount }}</span>
        </div>
      </template>
    </vxe-print>
    <vxe-button @click="printEvent1">直接列印</vxe-button>
    <vxe-button @click="printEvent2">呼叫方法列印</vxe-button>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
  data () {
    return {}
  },
  methods: {
    printEvent1 () {
      const $print = this.$refs.printRef
      if ($print) {
        $print.print()
      }
    },
    printEvent2 () {
      VxeUI.print({
        title: '標題33',
        footerHtml ({ currentPage, pageCount }) {
          return `
            <div style="font-size: 20px;padding-top: 20px;text-align: center;">
              <span>自定義頁尾，當前頁碼：${currentPage}/${pageCount}</span>
            </div>`
        },
        pageBreaks: [
          {
            bodyHtml: `
              <div>第一頁</div>
              <div>內容</div>
              <div>內容</div>
              `
          },
          {
            bodyHtml: `
              <div>第二頁</div>
              <div>內容</div>
              <div>內容</div>
            `
          },
          {
            bodyHtml: `
              <div>第三頁</div>
              <div>內容</div>
              <div>內容</div>
              `
          }
        ]
      })
    }
  }
}
</script>

分頁列印表格

<template>
  <div>
    <vxe-button @click="printEvent">分頁列印表格</vxe-button>

    <vxe-table
      border
      height="500"
      ref="tableRef"
      :data="tableData">
      <vxe-column field="id" title="ID" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="address" title="Address"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-table'
import XEUtils from 'xe-utils'
export default {
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    printEvent () {
      const $table = this.$refs.tableRef
      if ($table) {
        // 分割每頁26條
        Promise.all(XEUtils.chunk(this.tableData, 26).map(pageData => {
          return $table.getPrintHtml({
            data: pageData
          }).then(({ html }) => {
            return {
              bodyHtml: html
            }
          })
        })).then(pageBreaks => {
          VxeUI.print({
            title: '分頁列印表格',
            showPageNumber: true,
            pageBreaks
          })
        })
      }
    }
  },
  created () {
    const list = []
    for (let i = 0; i < 100; i++) {
      list.push({
        id: 10001 + i,
        name: 'Test1',
        role: 'Develop',
        sex: 'Man',
        address: 'test abc'
      })
    }
    this.tableData = list
  }
}
</script>

https://gitee.com/x-extends/vxe-pc-ui

相關文章