html - 从网页打印就像从 A4 的 PDF 文件打印一样

Question

我有很长的网络表格来收集数据，我正在分享示例，但实际表格可能会更长。

我需要知道如何以用户看到的类似格式打印表单数据，就像用户填写 PDF 表单并打印一样，以便打印版本看起来像他看到的那样。

代码笔链接https://codepen.io/anon/pen/ewYrwv 我不确定如何使它与 A4 页面一起使用，就好像数据是从 PDF 表单打印的一样。它不需要响应，因为表格只能从桌面打印..

我把容器放在 800 像素，它仍然打印在页边距之外。

我尝试使用 CSS http://www.tutorialspoint.com/css/css_paged_media.htm

但这并没有多大帮助

.container{max-width:800px;}
  @page {
         size: 8.5in 11in;  /* width height */
		 
		 margin: 2cm; /* All margins set to 2cm */
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form>
    <div class="form-row">
    <h1 class="text-center">Form</h1>
    
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">First Name</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Last Name</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">Email</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Password</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
        </div>
      </div>
    <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">Mobile</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Landline</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
        </div>
      </div>
    
    <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">Start Date</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">End Date</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
        </div>
    </div>
    
    
    <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputPassword4">Time</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Time">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Venue</label>
                <select id="inputState" class="form-control">
    				<option selected>Choose...</option>
    				<option>...</option>
    			  </select>
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputPassword4">Trainer</label>
                      <select id="inputState" class="form-control">
    				<option selected>Choose...</option>
    				<option>...</option>
    			  </select>
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Court</label>
                <select id="inputState" class="form-control">
    				<option selected>Choose...</option>
    				<option>...</option>
    			  </select>
        </div>
    </div>
    
      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck">
          <label class="form-check-label" for="gridCheck">
            Recurring
          </label>
        </div>
    	
      </div>
      
      <div class="form-group">
        <div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
    	  <label class="form-check-label" for="inlineCheckbox1">Sun</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
    	  <label class="form-check-label" for="inlineCheckbox2">Mon</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
    	  <label class="form-check-label" for="inlineCheckbox3">Tue</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
    	  <label class="form-check-label" for="inlineCheckbox3">Wed</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
    	  <label class="form-check-label" for="inlineCheckbox3">Thu</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
    	  <label class="form-check-label" for="inlineCheckbox3">Fri</label>
    	</div>
    	<div class="form-check form-check-inline">
    	  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
    	  <label class="form-check-label" for="inlineCheckbox3">Sat</label>
    	</div>
      </div>  
    
      
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      
      <div class="form-group">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control">
            <option selected>Choose...</option>
            <option>...</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip">Zip</label>
          <input type="text" class="form-control" id="inputZip">
        </div>
      </div>
      
      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck">
          <label class="form-check-label" for="gridCheck">
            Check me out
          </label>
        </div>
      </div>
      
      <button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
    </form>
        </div>

标签： htmlcssprinting