• vue+antd——实现table表格的打印——分页换行,每页都有表头——基础积累


    场景

    最近在写后台管理系统时,遇到一个需求,就是要实现表格的打印功能。

    下面整理一下需求:

    1.表格是antd中的table组件
    2.表格中含有多个字段,打印时不能出现滚动条,支持多页打印
    3.表格内容很多时,要保证不能出现单元格断页,且每页需要添加表头
    4.打印的内容只有table区域,其余内容不要打印

    效果图

    在这里插入图片描述
    横向打印预览效果:
    在这里插入图片描述
    纵向打印预览效果:
    在这里插入图片描述

    功能实现1:html代码

    <a-card class="box-card topSearchBox">
      <a-button type="primary" @click="handlePrint">打印余料清单</a-button>
      <a-table
        id="printContent"
        :loading="spinning"
        :data-source="tableList"
        bordered
        :columns="columns"
        :pagination="false"
      >
      </a-table>
    </a-card>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    功能实现2:css样式

    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    功能实现3:js代码

    handlePrint() {
      this.$nextTick(() => {
        let printWrap = document.getElementById('printContent');
        let oldStr = window.document.body.innerHTML;
        let newStr = printWrap.innerHTML;
        window.document.body.innerHTML = newStr;
        window.print();
        setTimeout(() => {
          printWrap.style.zoom = 1;
          window.document.body.innerHTML = oldStr;
          location.reload();
        }, 100);
      });
    },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    完成!!!多多积累,多多收获!!!

    下面内容为补充内容,可忽略!!!

    补充内容

    菜鸟学堂:http://edu.jb51.net/cssref/cssref-page-break-inside.html

    在这里插入图片描述

    page-break-inside 属性

    属性定义及使用说明
    page-break-inside 属性设置元素前的 page-breaking 行为。

    注意: 您不能对绝对定位的元素使用此属性。

    注意: 请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

    属性值

    描述
    auto默认,如果必要则在元素内部插入分页符。
    avoid避免在元素内部插入分页符。
    inherit规定应该从父元素继承 page-break-inside 属性的设置。

    在这里插入图片描述

    page-break-after属性

    此CSS属性用于在打印文档时调整元素后的分页符。在打印过程中,它将在指定元素之后插入一个分页符。我们不能在绝对定位的元素 (position:absolute;)或不生成框的空
    元素上使用此属性。
    此CSS属性表示在元素框后是否允许分页符。 CSS属性 page-break-before 和 page-break-inside 包括 page-break-after ,可帮助我们定义行为的行为。文档。

    语法

    page-break-after: auto | always | left | right | avoid | initial | inherit;

    描述
    auto这是默认值,必要时在元素后插入分页符。
    always它指定元素之后强制分页。
    left它用于避免在元素之后分页。
    right它会在指定元素后强制分页一次或两次,以便将下一页描述为左侧页面。
    avoid它会在指定元素之后强制分页一次或两次,以便将下一页显示为右侧页面。
    initial它将属性设置为其默认值。
    inherit如果指定了此值,则对应的元素将使用其父元素的计算值。

    在这里插入图片描述

    page-break-before 属性

    属性定义及使用说明
    page-break-before 属性设置元素前的 page-breaking 行为。

    注意: 您不能对绝对定位的元素使用此属性。

    注意:请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

    描述
    auto这是默认值,必要时在元素后插入分页符。
    always在元素前插入分页符。
    avoid避免在元素前插入分页符。
    left在元素之前足够的分页符,一直到一张空白的左页为止。
    right在元素之前足够的分页符,一直到一张空白的右页为止。
    inherit规定应该从父元素继承 page-break-before 属性的设置。
  • 相关阅读:
    Spring Batch:处理大数据和批量任务的解决方案
    JAVASE零基础到高级教程(1)------ 集成开发环境安装使用
    基于Splinter演示如何使用Chrome WebDriver
    【校招VIP 前端】后台接口说明和理解
    python打包和发布package
    手撸RPC【gw-rpc】
    javaWebssh教师荣誉库管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计
    看界面控件DevExpress WinForms如何创建一个虚拟键盘
    共模电感的仿真应用来了,满满的干货送给大家
    word使用笔记
  • 原文地址:https://blog.csdn.net/yehaocheng520/article/details/132762943