天津网站建设模板,做简历的网站viso,互联广告精准营销,上海魔力网站建设公司这里写目录标题 场景效果图功能实现1#xff1a;html代码功能实现2#xff1a;css样式功能实现3#xff1a;js代码补充内容page-break-inside 属性page-break-after属性page-break-before 属性 场景
最近在写后台管理系统时#xff0c;遇到一个需求#xff0c;就是要实现… 这里写目录标题 场景效果图功能实现1html代码功能实现2css样式功能实现3js代码补充内容page-break-inside 属性page-break-after属性page-break-before 属性 场景
最近在写后台管理系统时遇到一个需求就是要实现表格的打印功能。
下面整理一下需求 1.表格是antd中的table组件 2.表格中含有多个字段打印时不能出现滚动条支持多页打印 3.表格内容很多时要保证不能出现单元格断页且每页需要添加表头 4.打印的内容只有table区域其余内容不要打印 效果图 横向打印预览效果 纵向打印预览效果
功能实现1html代码
a-card classbox-card topSearchBoxa-button typeprimary clickhandlePrint打印余料清单/a-buttona-tableidprintContent:loadingspinning:data-sourcetableListbordered:columnscolumns:paginationfalse/a-table
/a-card功能实现2css样式
style typetext/css scoped langless
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功能实现3js代码
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属性用于在打印文档时调整元素后的分页符。在打印过程中它将在指定元素之后插入一个分页符。我们不能在绝对定位的元素 positionabsolute;或不生成框的空 元素上使用此属性。 此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 属性的设置。
