@zhangqingcq/plug-r-qw/src/style/components/tablePrint.less

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

/**
 * created 2024.03.12
 * @author ricky zhangqingcq@foxmail.com
 */
.tablePrintModal {
	padding: 45px 0 20px 20px;

	.a4Line {
		position: absolute;
		top: 45px;
		width: 5px;
		height: calc(100% - 45px);
		padding: 200px 0 0 3px;
		border-left: 1px dashed #ccc;
		z-index: 1;
		overflow: visible;
		color: rgba(0, 0, 0, 0.15);

		&:hover {
			color: #9a734c;
			border-color: #9a734c;
		}

		p {
			width: 200px;
			line-height: 1.5rem;
			user-select: none;
			cursor: default;
		}

		&.aL {
			left: calc(20px + 715px);
		}

		&.aR {
			left: calc(20px + 1075px);
		}

		&.bL {
			left: calc(20px + 1040px);
			padding-top: 60px;
		}

		&.bR {
			left: calc(20px + 1562px);
			padding-top: 60px;
		}
	}

	.msgL {
		padding-left: 40px;
		font-size: 18px;
		color: #2c3e50;
	}

	.topsL {
		position: fixed;
		top: 0;
		left: 0;
		border-bottom: 1px solid #ddd;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		z-index: 1000;

		.topsLTitle {
			font-size: 14px;
			font-weight: bold;
			padding-left: 15px;
			float: left;
		}

		.topsLBtn {
			float: right;
			padding-right: 10px;

			.tableBtnsG i {
				line-height: 40px;
			}
		}

		.topsLHelp {
			position: absolute;
			top: 40px;
			right: 200px;
			width: 300px;
			padding: 10px 20px;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);

			p {
				line-height: 1.5rem;
			}
		}
	}

	.ivu-table-wrapper-with-border {
		border-color: transparent;

		> .ivu-table-border {
			border-left: 1px solid #dcdee2;

			&:after,
			&:before {
				background-color: transparent;
			}

			> .ivu-table-header {
				> table > thead > tr:first-child th {
					border-top: 1px solid #dcdee2;
				}
			}
		}
	}

	.tablePW {
		display: inline-block;
	}

	.domPrintSetting {
		height: 30px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10px;

		.settingLine {
			width: 5px;
			border-right: 1px solid #ccc;
			cursor: col-resize;

			&:hover {
				border-color: #150a3d;
			}
		}
	}

	.domPrintContent {
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	}
}

@media print {
	.tablePrintModal {
		display: inline-block;
		padding: 0;
		margin: 0 auto;

		.notPrint {
			display: none;
		}

		.domPrintContent {
			box-shadow: none;
		}
	}
}