vue實(shí)現(xiàn)表格打印功能

更新時(shí)間：2024年01月17日 11:38:28 作者：bug愛(ài)好者

常見(jiàn)的打印有JavaScript打印、jQuery、vue打印,這里主要講述vue使用vue-print-nb進(jìn)行打印,廢話不多說(shuō),直接手摸手上代碼,感興趣的朋友可以參考下

安裝依賴(lài)

npm install vue-print-nb --save

頁(yè)面引用

import print from 'vue-print-nb'

父組件DOM

<div class="table-manage-20">
  <!-- 標(biāo)題欄 -->
  <llsTitleBox title="打印功能" :back="false">
    <template slot="button">
      <llsButton type="primary" @click="batchPrintHandle">打印</llsButton>
      
      // directives自定義print事件，目的：
         1. 取代將print在man.js全局注入（Vue.use(Print)）
         2. 當(dāng)點(diǎn)擊打印按鈕后，會(huì)將打印列表printObj對(duì)象進(jìn)行賦值，此時(shí)就會(huì)打開(kāi)打印列表組件，取代將打印列表組件進(jìn)行傳統(tǒng)的顯示影藏操作
      <llsButton type="primary" ref="printBtn" v-show="false" v-print="printObj"></llsButton>
    </template>
  </llsTitleBox>
  <!-- 表格 -->
  <div style="padding:0 15px;">
    <lls-table :max-height="tableHeight" :data="tableList" @selection-change="handleSelectionChange">
    <lls-table-column type="selection" width="55"></lls-table-column>
    <lls-table-column type="index" label="序號(hào)" width="50"></lls-table-column>
    <lls-table-column prop="assetNo" min-width="180" label="編號(hào)"></lls-table-column>
    <lls-table-column prop="assetId" min-width="180" label="數(shù)字證編號(hào)"></lls-table-column>
    <lls-table-column prop="coreCompanyName" min-width="200" label="企業(yè)"></lls-table-column>
    <lls-table-column prop="amount" min-width="150" :formatter="formatMoney" align="right" label="金額(元)"></lls-table-column>
    <lls-table-column prop="operateTime" label="操作"  width="60" fixed="right">
      <template v-slot:default="{ row }">
         <div class="table-btn" @click="printHandle([row])">打印</div>
      </template>
    </lls-table-column>
  </lls-table>
  // 打印列表組件
  <div class="hide">
     // 打印區(qū)域組件上需要加id="printContent"，與打印組件綁定
     <div id="printContent">
       // page-break-after:always：設(shè)置在表格元素之后始終進(jìn)行分頁(yè)的分頁(yè)行為：在元素后插入分頁(yè)符，原因：當(dāng)一頁(yè)表格內(nèi)容放不下的情況不會(huì)進(jìn)行分頁(yè)，內(nèi)容會(huì)被截?cái)啵藰邮娇梢越鉀Q該問(wèn)題
       // printList：為當(dāng)前全選或單選的對(duì)象，該數(shù)據(jù)將會(huì)填充打印表格的結(jié)構(gòu)數(shù)據(jù)
       <printTemplate style="page-break-after:always" v-for="(item, index) in printList" :baseData="item" :key="index"></printTemplate>
     </div>
   </div>

父組件js代碼

<script>
  import print from 'vue-print-nb'
  import printTemplate from './printTemplate.vue'
  export default {
    components: {
      printTemplate
    },
    // 自定義print指令，頁(yè)面中v-print使用，觸發(fā)打印插件
    directives: {
      print   
    },
    data() {
        return {
            tableHeight: "400px",
            tableList: [], //表格數(shù)據(jù)對(duì)象
            multipleSelection: [],
            printList: [],
            // 打印對(duì)象
            printObj: {
            id: "printContent",
          }
        };
    },
    mounted() {
        this.$nextTick(() => {
            // 整個(gè)視圖高度
            let screenHeight = document.body.offsetHeight;
            // 查詢(xún)組件DOM，視項(xiàng)目情況而定（搜索組件高度）
            let searchBarHeight = this.$refs.searchBar.clientHeight;
            let dataContent = screenHeight - 44 * 2 - searchBarHeight - 50;
            this.tableHeight = `${dataContent}px`;
        });
    },
    methods: {
        // 全選單選事件
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 打印按鈕
        batchPrintHandle() {
          if(!this.multipleSelection.length) {
            return this.$message.error("請(qǐng)先選擇數(shù)據(jù)!");
          } else {
            this.printHandle(this.multipleSelection)
          }
        },
        printHandle(printList) {
            // 將數(shù)據(jù)重新拷貝解構(gòu)賦值，打印列表數(shù)據(jù)
            this.printList = [...printList]
            this.$nextTick(() => {
                // 獲取打印按鈕DOM結(jié)構(gòu)
                const btnEl = this.$refs.printBtn.$el
                // 對(duì)打印按鈕自定義click事件
                const clickEvent = new MouseEvent('click')
                // dispatchEvent原生觸發(fā)自定義click事件，打開(kāi)打印組件
                btnEl.dispatchEvent(clickEvent)
            })
        },

父組件樣式代碼

.hide {
  width: 0; height: 0; overflow: hidden;
}

printTemplate子組件DOM

<template>
  <div class="print-wrapper">
    <div class="print-title">打印表單</div>
    <div class="print-table-wrapper">
        <table border="1" cellspacing="0" cellpadding="0"  class="print-table">
        <tr>
          <td colspan="4">基本信息：</td>
        </tr>
        <tr>
          <td class="label">客戶(hù)名稱(chēng)</td>
          <td colspan="3">{{baseData.sedCompanyName}}</td>
        </tr>
        <tr>
          <td class="label">企業(yè)名稱(chēng)</td>
          <td colspan="3">{{baseData.coreCompanyName}}</td>
        </tr>
        <tr>
          <td class="label">金額（元）</td>
          <td >{{baseData.realAmount | formatMoney}}</td>
          <td class="label">期限（天）</td>
          <td>{{baseData.loanTerm }}</td>
        </tr>
        <tr>
        <td class="label">費(fèi)率(%)</td>
          <td colspan="3">{{baseData.interestRate}}</td>
        </tr>
        <tr>
          <td class="label">應(yīng)收款（元）</td>
          <td colspan="3">{{baseData.amount | formatMoney}}</td>
        </tr>
        <tr>
          <td class="label">編號(hào)</td>
          <td colspan="3">{{baseData.assetId}}</td>
        </tr>
        <tr>
          <td class="label">客戶(hù)收款銀行</td>
          <td colspan="3">{{baseData.toBankName}}</td>
        </tr>
        <tr>
          <td class="label">客戶(hù)收款賬戶(hù)名</td>
          <td colspan="3">{{baseData.toName}}</td>
        </tr>
        <tr>
          <td class="label">客戶(hù)收款賬號(hào)</td>
          <td colspan="3">{{baseData.toAccount}}</td>
        </tr>
        <tr>
            <td class="label">卡號(hào)</td>
          <td colspan="3">{{baseData.unitedBankNumber}}</td>
        </tr>
        <tr>
          <td colspan="4" class="label">處理意見(jiàn)：</td>
        </tr>
        <tr v-for="(item, index) in baseData.approveLogs" :key="index">
          <td class="label">{{item.name | sliceSuffix}}</td>
          <td colspan="3">{{item.approveResultName}}&nbsp;&nbsp; {{item.approveTime}}&nbsp;&nbsp; {{item.assignee}}&nbsp;&nbsp; {{item.approvalOpinions}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

printTemplate子組件 js

export default {
  name: 'printTemplate',
  props: {
    baseData: {
      type: Object,
      default: () => {}
    }
  },
  // js過(guò)濾器方法
  filters: {
    // 上面本是負(fù)責(zé)人審批，由于項(xiàng)目需求，需要將審批字段去掉，自己項(xiàng)目視情況而定
    sliceSuffix(name) {
      // endsWith() 是一種字符串方法，用于確定字符串是否以特定的字符序列結(jié)尾。返回一個(gè)布爾值
      return name.endsWith('審批') ? name.slice(0, -2) : name
    },
    
    // 金額格式化，格式化效果見(jiàn)頂端需求實(shí)現(xiàn)圖
    formatMoney(value) {
      value = Number(value).toFixed(2);
      const index = value.indexOf('.');
      if (index != -1) {
          var decimalPart = value.substring(0, index);
          var pointPart = value.substring(index + 1);
          decimalPart = decimalPart.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');    // 整數(shù)部分做格式化
          value = decimalPart + "." + pointPart;
      } else {
          value = value.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
      return value
    }
  },

3.printTemplate子組件樣式

<style lang="scss" scoped>
// 解決el-table表格內(nèi)容過(guò)多，打印不全問(wèn)題
@page {
  size: auto;
  margin: 3mm;
}
.print-wrapper {
  padding:0 20px;
  .print-title {
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    
  }
  .print-table-wrapper {
    border: 1px solid #000;
    padding: 3px;
    margin-bottom: 20px;
    .print-table {
      width: calc(100% - 3px);
      border-collapse: collapse;
      border: 3px solid #000;
      td {
        height: 40px;
        padding: 0 10px;
        border: 1px solid #333;
        color: #333;
        &.label {
          width: 180px;
        }
      }
    }
  }
}
</style>

注意事項(xiàng)：

該打印列表為表格數(shù)據(jù)打印，如果為其他需求打印，該方法將不再適用，請(qǐng)參考指令 v-print="print",print的配置對(duì)象參數(shù)：

print: {
    id: 'printArea',
    popTitle: '打印', // 打印配置頁(yè)上方標(biāo)題
    extraHead: '', //最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽,使用逗號(hào)分隔
    preview: '', // 是否啟動(dòng)預(yù)覽模式，默認(rèn)是false（開(kāi)啟預(yù)覽模式，可以先預(yù)覽后打印）
    previewTitle: '', // 打印預(yù)覽的標(biāo)題（開(kāi)啟預(yù)覽模式后出現(xiàn)）,
    previewPrintBtnLabel: '', // 打印預(yù)覽的標(biāo)題的下方按鈕文本，點(diǎn)擊可進(jìn)入打印（開(kāi)啟預(yù)覽模式后出現(xiàn)）
    zIndex: '', // 預(yù)覽的窗口的z-index，默認(rèn)是 20002（此值要高一些，這涉及到預(yù)覽模式是否顯示在最上面）   
    previewBeforeOpenCallback() {}, //預(yù)覽窗口打開(kāi)之前的callback（開(kāi)啟預(yù)覽模式調(diào)用）
    previewOpenCallback() {}, // 預(yù)覽窗口打開(kāi)之后的callback（開(kāi)啟預(yù)覽模式調(diào)用）
    beforeOpenCallback() {}, // 開(kāi)啟打印前的回調(diào)事件
    openCallback() {}, // 調(diào)用打印之后的回調(diào)事件
    closeCallback() {}, //關(guān)閉打印的回調(diào)事件（無(wú)法確定點(diǎn)擊的是確認(rèn)還是取消）
    url: '',
    standard: '',
    extraCss: '',
    },

以上就是vue實(shí)現(xiàn)表格打印功能的詳細(xì)內(nèi)容，更多關(guān)于vue表格打印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: