HTML实现A4模板

前言

需要使用html实现打印前预览的界面，要求预览结果与打印效果相同
使用环境： bootstrapVue

---

一、A4模板效果

附实现效果(demo)

应用流程为点击界面的预览按钮，弹出窗口为制作的A4界面。

---

二、制作A4模板

1.思考界面结构（以所附demo[A4.html]分析）

• 模板分为头部，中间内容，底部footer三块内容（除去大标题），使用flex布局实现整个界面，因为中间的内容是不固定的，所以让它占据空间的最大内容，使用flex-grow:1占据空间，从而使布局分为上中下三块。
  代码结构如下（示例）：

  	<!--代码实例中的css定义直接用的bootstrap的公共样式方便代码编写,观看直接，实际html不能直接用类名的，需要另外编写css-->
  	<div class="root d-flex flex-column">
  		<div class="header"></div>
  		<div class="content flex-grow-1"></div>
  		<div class="footer"></div>
  	</div>					
  

2. 限制页面大小

• 需要将页面的大小限制在A4大小，因为用于打印，所以单位使用了mm，A4大小的宽高为(210mm,297mm)

  	/*这是将打印时的页面大小设置为A4大小，并保留好一定的边距*/
  	@page {
       
  	  /* size: 21cm 29.7cm; */
  	  font-size: 14pt;
  	  font-family: SimSun, 宋体, serif;
  	  color:black;
  	  line-height: 1.4;
  	  text-align: justify;
  	  margin:0;
  	  padding:0;
  	}
  

  	body{
       
  	  font-size: 14pt;  /*在打印中，字体大小使用pt单位*/
  	  font-family: "Times New Roman", Times, serif;
  	}
  	.root{
       
  	  /*需要将预览显示的界面限定在A4大小*/
  	  width:210mm;
  	  /*这个高度为什么不是A4的大小，是经过N次验证的方式得到的，唯一的目的就是为了保证预览和打印预览一致*/
  	  /*可能是我写的有一点问题，但是如果设置为297，那么显示就会出现问题*/
  	  height:340mm;
  	  /*上下不要设置padding,否则打印预览下面的footer就会往上走*/   
  	  padding: 0 24mm 0 24mm;
  	  /* margin-bottom: 24mm; */
  	  background-color: white;
  	}
  	/*下面两个样式是为了保证屏幕上预览和打印预览一致*/
  	@media screen{
       
  	  .content{
       
  	    width:210mm;
  	    height:340mm;
  	    /* padding-top:12mm; */
  	    display: flex;
  	    flex-direction: column;
  	  }
  	}