simple-print--demo

by sutanlab

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Simple Print Demo</title>
</head>

<body>
	<div class="container py-3">
    <div id="element-to-print">
      <h1 class="text-center">
        Simple Print JS Demo
      </h1>
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button type="button" class="btn btn-dark btn-block" onclick="printTest()">Print</button>
  </div>
  <script src="https://unpkg.com/simple-print/lib/bundle/simple-print.min.js"></script>
  <script>
  	var print = new SimplePrint({
    	styles: [
      	'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
      ]
    });
    
    function printTest() {
    	var elem = document.getElementById('element-to-print');
    	print.render(elem);
    }
  </script>
</body>

</html>