vue-print-nb插件来实现打印功能——打印布局及尺寸处理

叶浩成520

已于 2024-12-25 14:52:17 修改

阅读量3.3k

点赞数 8

分类专栏：打印效果前端基础知识 javascript知识点文章标签： vue.js 前端 javascript

于 2024-04-28 10:42:55 首次发布

本文链接：https://blog.csdn.net/yehaocheng520/article/details/138269918

版权

前端基础知识同时被 3 个专栏收录

338 篇文章

订阅专栏

javascript知识点

199 篇文章

订阅专栏

打印效果

1 篇文章

订阅专栏

本文介绍了在使用vue-print-nb实现打印功能时遇到的问题，如分页符应用、单元格宽度控制等，并分享了CSS样式调整以改进打印效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一篇文章是关于vue-print-nb插件实现打印功能，
vue插件——vue-print-nb 实现打印功能:https://yehaocheng520.blog.csdn.net/article/details/136293441?fromshare=blogdetail&sharetype=blogdetail&sharerId=136293441&sharerefer=PC&sharesource=yehaocheng520&sharefrom=from_link

可以实现的效果如下：

在这里插入图片描述

但是在实际使用过程中，打印的效果不尽如人意。下面把打印页面和遇到的问题做一下汇总：

1.html代码——给打印元素绑定`printDiv`的id

<div id="printDiv" class="boxPrint">
	//下面是遍历的多个数组，从第二个数组开始，就要开始分页，所以给其余元素添加元素前添加分页符
	<div class="listPrint" v-for="(item,index) in listDB" :key="index" :style="index>0?'page-break-before:always;':''">
		<table>
			<tr>
				<td style="width:6mm">序号</td>
				<td style="width:14mm">卡号</td>
				<td style="width:12mm" colspan="2">规格</td>
				<td style="width:10mm">数量</td>
				<td style="width:42mm">加工参数</td>
				<td style="width:12mm">备注</td>
			</tr>
			<tr v-for="(list,listIndex) in item.lists" :key="listIndex">
				<td>序号</td>
				<td>卡号</td>
				<td>规格1</td>
				<td>规格2</td>
				<td>数量</td>
				<td>加工参数</td>
				<td>备注</td>
			</tr>
		</table>
	</div>
</div>

在这里插入图片描述

2.css部分

页面的样式如下：

<style lang="less" scoped>
#printDiv{
	width:90%;
	margin:0 auto;
	padding:0;
	table{
		width:100%;
		border-collapse:collapse;
		border-spacing:0;
		font-size:3.2mm;
		margin:2mm 0;
		table-layout:fixed;//加入了这个属性，才可以设置单元格的宽度，否则设置了也不生效
		td{
			color:#000;
			border:0.5mm solid #000;
			text-align:left;
			padding:2px;
			word-wrap:break-word;
			span{
				//超出2行后隐藏
				text-overflow:-o-ellipsis-lastline;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-line-clamp:2;
				line-clamp:2;
				-webkit-box-orient:vertical;
			}
		}
	}
	*{
		-webkit-print-color-adjust:exact;
	}
}
</style>

打印的样式如下：

<style lang="less" scoped>
	@media print{
		@page{
			size:auto;
			margin:0;
		}
		#printDiv{
			font-weight:bold !important;
			.listPrint{
				margin-left:-10mm;
			}
			table{
				width:90%;
				font-size:2.4mm !important;
				td{
					span{
						margin-height:6.6mm !important;
					}
				}
			}
			.t{
				font-size:2.6mm !important;
			}
		}
	}
</style>