问题描述

目前有一个tabs页面，每个里面是不同的表单，因为通过v-if实现的显隐控制，需求要求点击打印后将全部tabs的内容打印，每个tabs页面是一个独立的页。

功能实现

1.新建一个div将tabs全部渲染
2.通过隐藏实现div不可见
3.通过css控制每个tabs是一个单独的A4纸。

具体代码

HTML代码

		<!-- 需要填写想要打印的id -->
		<button v-print="'#objectDialogPrintWarp'"></button>
			<!-- 这句话很重要，如果通过display：none控制显隐会导致点击打印按钮生成空白-->
        <div style="width: 0;height: 0;overflow: hidden">
                    <div id="objectDialogPrintWarp" class="objectDialogFlowPrint">
                        <div class="myPrint">
                            <div class="pageWarp" v-for="item in editableTabs">
                            <!--每一页的具体内容-->
                            </div>
                        </div>
                    </div>
                </div>

css代码

.objectDialogFlowPrint .pageWarp {
	/*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
    page-break-after: always;//
    padding: 20px;
}
.objectDialogFlowPrint .myPrint {
/* 打印的时候是否显示底色 */
    -webkit-print-color-adjust: exact;
}