vue实现表格打印功能

更新时间：2024年01月17日 11:38:28 作者：bug爱好者

常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印,废话不多说,直接手摸手上代码,感兴趣的朋友可以参考下

安装依赖

npm install vue-print-nb --save

页面引用

import print from 'vue-print-nb'

父组件DOM

<div class="table-manage-20">
  <!-- 标题栏 -->
  <llsTitleBox title="打印功能" :back="false">
    <template slot="button">
      <llsButton type="primary" @click="batchPrintHandle">打印</llsButton>
      
      // directives自定义print事件，目的：
         1. 取代将print在man.js全局注入（Vue.use(Print)）
         2. 当点击打印按钮后，会将打印列表printObj对象进行赋值，此时就会打开打印列表组件，取代将打印列表组件进行传统的显示影藏操作
      <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="序号" width="50"></lls-table-column>
    <lls-table-column prop="assetNo" min-width="180" label="编号"></lls-table-column>
    <lls-table-column prop="assetId" min-width="180" label="数字证编号"></lls-table-column>
    <lls-table-column prop="coreCompanyName" min-width="200" label="企业"></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">
     // 打印区域组件上需要加id="printContent"，与打印组件绑定
     <div id="printContent">
       // page-break-after:always：设置在表格元素之后始终进行分页的分页行为：在元素后插入分页符，原因：当一页表格内容放不下的情况不会进行分页，内容会被截断，此样式可以解决该问题
       // printList：为当前全选或单选的对象，该数据将会填充打印表格的结构数据
       <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指令，页面中v-print使用，触发打印插件
    directives: {
      print   
    },
    data() {
        return {
            tableHeight: "400px",
            tableList: [], //表格数据对象
            multipleSelection: [],
            printList: [],
            // 打印对象
            printObj: {
            id: "printContent",
          }
        };
    },
    mounted() {
        this.$nextTick(() => {
            // 整个视图高度
            let screenHeight = document.body.offsetHeight;
            // 查询组件DOM，视项目情况而定（搜索组件高度）
            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("请先选择数据!");
          } else {
            this.printHandle(this.multipleSelection)
          }
        },
        printHandle(printList) {
            // 将数据重新拷贝解构赋值，打印列表数据
            this.printList = [...printList]
            this.$nextTick(() => {
                // 获取打印按钮DOM结构
                const btnEl = this.$refs.printBtn.$el
                // 对打印按钮自定义click事件
                const clickEvent = new MouseEvent('click')
                // dispatchEvent原生触发自定义click事件，打开打印组件
                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">客户名称</td>
          <td colspan="3">{{baseData.sedCompanyName}}</td>
        </tr>
        <tr>
          <td class="label">企业名称</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">费率(%)</td>
          <td colspan="3">{{baseData.interestRate}}</td>
        </tr>
        <tr>
          <td class="label">应收款（元）</td>
          <td colspan="3">{{baseData.amount | formatMoney}}</td>
        </tr>
        <tr>
          <td class="label">编号</td>
          <td colspan="3">{{baseData.assetId}}</td>
        </tr>
        <tr>
          <td class="label">客户收款银行</td>
          <td colspan="3">{{baseData.toBankName}}</td>
        </tr>
        <tr>
          <td class="label">客户收款账户名</td>
          <td colspan="3">{{baseData.toName}}</td>
        </tr>
        <tr>
          <td class="label">客户收款账号</td>
          <td colspan="3">{{baseData.toAccount}}</td>
        </tr>
        <tr>
            <td class="label">卡号</td>
          <td colspan="3">{{baseData.unitedBankNumber}}</td>
        </tr>
        <tr>
          <td colspan="4" class="label">处理意见：</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过滤器方法
  filters: {
    // 上面本是负责人审批，由于项目需求，需要将审批字段去掉，自己项目视情况而定
    sliceSuffix(name) {
      // endsWith() 是一种字符串方法，用于确定字符串是否以特定的字符序列结尾。返回一个布尔值
      return name.endsWith('审批') ? name.slice(0, -2) : name
    },
    
    // 金额格式化，格式化效果见顶端需求实现图
    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,');    // 整数部分做格式化
          value = decimalPart + "." + pointPart;
      } else {
          value = value.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
      return value
    }
  },

3.printTemplate子组件样式

<style lang="scss" scoped>
// 解决el-table表格内容过多，打印不全问题
@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>

注意事项：

该打印列表为表格数据打印，如果为其他需求打印，该方法将不再适用，请参考指令 v-print="print",print的配置对象参数：

print: {
    id: 'printArea',
    popTitle: '打印', // 打印配置页上方标题
    extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
    preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
    previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
    previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
    zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
    previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
    previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
    beforeOpenCallback() {}, // 开启打印前的回调事件
    openCallback() {}, // 调用打印之后的回调事件
    closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
    url: '',
    standard: '',
    extraCss: '',
    },

以上就是vue实现表格打印功能的详细内容，更多关于vue表格打印的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue cli4中mockjs在dev环境和build环境的配置详情
这篇文章主要介绍了vue cli4中mockjs在dev环境和build环境的配置详情，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
element-ui组件table实现自定义筛选功能的示例代码
这篇文章主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
vue3中nextTick()应用实例详解
这篇文章主要给大家介绍了关于vue3中nextTick()应用的相关资料,nextTick()等待下一次DOM更新刷新的工具方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
详解基于Vue cli开发修改外部组件Vant默认样式
这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
element-ui表格数据转换的示例代码
这篇文章主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
4种方案带你探索Vue代码复用的前世今生
我们所熟知的Vue.js也在如何提取公共代码复用方面也一直在探索优化，本文小编就来和各位聊聊Vue.js代码复用的前世今生，希望对大家学习Vue有一定的帮助
2023-05-05
vue3 ref获取组件实例详细图文教程
在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下
2023-10-10
Vue3全局组件注册的实现代码
在这篇文章中,我们将学习一下 Vue3 的全局组件注册是如何实现的,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-12-12
Vue页面渲染中key的应用实例教程
这篇文章主要给大家介绍了关于Vue页面渲染中key的应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Vue 3.0的attribute强制行为理解学习
这篇文章主要为大家介绍了Vue 3.0的attribute强制行为理解学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08

vue实现表格打印功能

目录

安装依赖

页面引用

父组件DOM

注意事项：

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具