Печать с веб-страницы, как будто печать из PDF-файла для A4

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>