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

这里写目录标题

场景

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

下面整理一下需求:

1.表格是antd中的table组件

2.表格中含有多个字段,打印时不能出现滚动条,支持多页打印

3.表格内容很多时,要保证不能出现单元格断页,且每页需要添加表头

4.打印的内容只有table区域,其余内容不要打印

效果图

横向打印预览效果:

纵向打印预览效果:

功能实现1:html代码

js 复制代码
<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>

功能实现2:css样式

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代码

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 属性的设置。
相关推荐
花花鱼4 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09338 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135829 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning29 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人39 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00140 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css