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

这里写目录标题

  • 场景
  • 效果图
  • 功能实现1:html代码
  • 功能实现2:css样式
  • 功能实现3:js代码
  • 补充内容
        • page-break-inside 属性
        • page-break-after属性
        • page-break-before 属性

场景

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

下面整理一下需求:

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

效果图

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

功能实现1:html代码

<a-card class="box-card topSearchBox"><a-button type="primary" @click="handlePrint">打印余料清单</a-button><a-tableid="printContent":loading="spinning":data-source="tableList"bordered:columns="columns":pagination="false"></a-table>
</a-card>

功能实现2:css样式

<style type="text/css" scoped lang="less">
@page {size: auto;margin: 10mm 20mm;
}
@media print {/* 打印时隐藏相关文章链接 */#printContent {width: 900px;transform: scale(0.68);zoom: 0.5;border: 1px solid red;}
}#printContent {width: 100%;margin-top: 20px;transform: scale(1);zoom: 1;
}
#printContent table {width: 100%;border: 1px solid #000;border-right: none;border-bottom: none;page-break-inside: avoid;page-break-after: avoid;page-break-before: avoid;
}
::v-deep {#printContent table td,#printContent table th {vertical-align: middle;font-size: 3.4mm;text-align: left;}
}
</style>

功能实现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);});
},

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

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

补充内容

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 属性的设置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电池电动汽车的健康状态 SOH 和充电状态 SOC 估计

微❤关注“电气仔推送”获得资料 主要内容&#xff1a; 健康状态 SOH采用平均加权最小二乘法&#xff08;AWTLS&#xff09;进行估计&#xff0c;并对比了加权最小二乘 &#xff08;WLS&#xff09;、总最小二乘法&#xff08;TLS&#xff09;以及加权总最小二乘法&#xff0…

Python基于Flask的高校舆情分析,舆情监控可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 运行效果图 基于Python的微博大数据舆情分析&#xff0c;舆论情感分析可视化系统 系统介绍 微博舆情分析系…

小白备战大厂算法笔试(五)——树

文章目录 二叉树常用术语初始化插入与删除常见类型满二叉树完全二叉树完满二叉树平衡二叉树 二叉树退化二叉树遍历层序遍历前序、中序、后序遍历 数组表示二叉树表示完美二叉树表示任意二叉树 二叉搜索树查找节点插入节点删除节点遍历有序搜索效率常见应用 AVL树常见术语节点高…

(Vue2)非父子通信、v-model原理

非父子&#xff08;类似兄弟&#xff09;通信-event bus事件总线 1创建一个都能访问到的事件总线->utils/EventBus.js import Vue from vue const Busnew Vue() exports default Bus2A组件监听Bus实例的事件->components/BaseA(接收方) 注&#xff1a;都要导入 impor…

(高频面试1)Redis缓存穿透、缓存击穿、缓存雪崩

目录 一&#xff1a;缓存数据 1.1 应用场景 1.2&#xff1a;缓存数据出现的问题 1.2.1 缓存穿透 1.2.2 解决办法 1.2.3 缓存击穿 1.2.4 解决办法 1.2.5 缓存雪崩 1.2.6 解决办法 一&#xff1a;缓存数据 1.1 应用场景 数据库查询结果缓存是一种常见的缓存应用场景&a…

科普js加密时出现的错误

当你在使用Babel解析JavaScript代码时&#xff0c;可能会遇到一个错误信息&#xff1a;“Deleting local variable in strict mode”&#xff08;在严格模式下删除本地变量&#xff09;。这个错误信息通常表示你正在尝试删除一个使用let或const关键字声明的变量。在JavaScript的…

性能测试度量指标

1-响应时间 响应时间指从用户或事务在客户端发起一个请求开始&#xff0c;到客户端接收到从服务器端返回的响应结束&#xff0c;这整个过程所消耗的时间 在性能测试实践中&#xff0c;为了使响应时间更具代表性&#xff0c;响应时间通常是指事务的平均响应时间ART 在实践中要…

redis持久化、主从和哨兵架构

一、redis持久化 1、RDB快照&#xff08;snapshot&#xff09; redis配置RDB存储模式&#xff0c;修改redis.conf文件如下配置&#xff1a; # 在300s内有100个或者以上的key被修改就会把redis中的数据持久化到dump.rdb文件中 # save 300 100# 配置数据存放目录&#xff08;现…

Idea安装使用教程~

在本文中&#xff0c;我们将提供关于如何安装 IntelliJ IDEA 的详细步骤。如果您是初学者或只是想尝试一下 IDEA&#xff0c;我们建议您下载 Community 版。如果您需要更多高级功能&#xff0c;可以选择 Ultimate 版。 步骤一&#xff1a;下载 IntelliJ IDEA 首先&#xff0c;…

【SpringCloudAlibaba】Seata分布式事务使用

文章目录 分布式事务问题示例Seata概述、官网一个典型的分布式事务过程处理过程全局GlobalTransactional分布式交易解决方案流程图 Seata安装下载修改conf目录下的application.yml配置文件dashboard demo 分布式事务问题示例 单体应用被拆分成微服务应用&#xff0c;原来的三个…

Springboot+swagger2

1.swagger配置 /*** Swagger 配置文件*/ Configuration public class SwaggerConfig {Beanpublic Docket createRestApi() {return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select().apis(RequestHandlerSelectors.basePackage("com.swagger.two&qu…

Spring Boot @Value读不到Nacos配置中心的值。(properties配置文件)

读不到配置中心的值&#xff0c; 配置中心的配置文件名字&#xff08;Data ID的值&#xff09;要以.properties结尾。 如果是yaml&#xff0c;就以yaml命名。

LeetCode377. 组合总和 Ⅳ

377. 组合总和 Ⅳ 文章目录 [377. 组合总和 Ⅳ](https://leetcode.cn/problems/combination-sum-iv/)一、题目二、题解方法一&#xff1a;完全背包一维数组动态规划思路代码分析 方法二&#xff1a;动态规划二维数组 一、题目 给你一个由 不同 整数组成的数组 nums &#xff0…

Java8的Stream用法

Java8 API新增了一个新的抽象流Stream&#xff0c;它可以执行非常复杂的查找、过滤和映射数据等操作。使用Stream API 对集合数据进行操作&#xff0c;就类似于使用 SQL 执行的数据库查询。Stream就是把集合数据看作流&#xff0c;流在管道中传输&#xff0c;我们可在管道中进行…

Spring MVC:请求转发与请求重定向

Spring MVC 请求转发请求重定向附 请求转发 转发&#xff08; forward &#xff09;&#xff0c;指服务器接收请求后&#xff0c;从一个资源跳转到另一个资源中。请求转发是一次请求&#xff0c;不会改变浏览器的请求地址。 简单示例&#xff1a; 1.通过 String 类型的返回值…

GO语言篇之反射

GO语言篇之反射 文章目录 GO语言篇之反射前言获取变量类型获取变量值获取结构体的字段&#xff0c;方法&#xff0c;动态地修改&#xff0c;调用结构体的字段和方法创建变量缺点 前言 Go语言可以在运行期间查看自身结构&#xff0c;在运行时动态地获取结构体的信息&#xff0c…

人工智能训练?量子计算机?显卡!【为什么人工智能需要强大的显卡而不是处理器?量子计算机可以吗?】

人工智能硬件与量子计算机&#xff1a;未来的竞争与合作 人工智能&#xff08;AI&#xff09;领域的发展一直以来都与硬件技术密不可分。随着深度学习和神经网络的崛起&#xff0c;图形处理单元&#xff08;GPU&#xff09;等硬件成为了AI训练的主要工具。然而&#xff0c;量子…

spring 理解

仅供个人学习&#xff0c;部分转自路人甲&#xff0c;侵删 spring容器 1.基本概念 2.Spring Ioc 容器 3.Spring Aop 4.数据访问 5.Spring MVC 6.事务管理 7.高级特性 8.整合其他框架 9.理解原理 基本概念 spring启动流程&#xff0c;加载配置文件&#xff0c;创建…

2023年基因编辑行业研究报告

第一章 行业发展概况 1.1 定义 基因编辑&#xff08;Gene Editing&#xff09;&#xff0c;又称基因组编辑&#xff08;Genome Editing&#xff09;或基因组工程&#xff08;Genome Engineering&#xff09;&#xff0c;是一项精确的科学技术&#xff0c;可以对含有遗传信息的…

[JAVAee]Spring的基础介绍

本文章介绍了Spring大致是什么,核心的功能. Spring是什么? Spring指的是Spring Framework(Spring框架). 支持广大的开发场景,能够使应用开发变得简单. 其集成了各种工具,还实现了底层的类的实例化和生命周期的管理. 简单来说,Spring就是拥有众多工具方法的IoC容器 容器?…