Gerar PDF

JSPDF

by Rapha Souza

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<form class="form" style="max-width: none; width: 1005px;">  
  <input type="button" id="create_pdf" value="Generate PDF">
  
        <h2 style="color: #0094ff">Hello</h2>  
        <h3>a bit about this Project:</h3>  
        <p style="font-size: large">  
            I will demonstrate how to generate PDF file of your HTML page with CSS using JavaScript and J query.  
        </p>  
        <table>  
            <tbody>  
                <tr>  
                    <th>Company</th>  
                    <th>Contact</th>  
                    <th>Country</th>  
                </tr>  
                <tr>  
                    <td>Alfreds Futterkiste</td>  
                    <td>Maria Anders</td>  
                    <td>Germany</td>  
                </tr>  
                <tr>  
                    <td>Centro comercial Moctezuma</td>  
                    <td>Francisco Chang</td>  
                    <td>Mexico</td>  
                </tr>  
                <tr>  
                    <td>Ernst Handel</td>  
                    <td>Roland Mendel</td>  
                    <td>Austria</td>  
                </tr>  
                <tr>  
                    <td>Island Trading</td>  
                    <td>Helen Bennett</td>  
                    <td>UK</td>  
                </tr>  
                <tr>  
                    <td>Laughing Bacchus Winecellars</td>  
                    <td>Yoshi Tannamuri</td>  
             ...

CSS

table {  
            font-family: arial, sans-serif;  
            border-collapse: collapse;  
            width: 100%;  
        }  
  
        td, th {  
            border: 1px solid #dddddd;  
            text-align: left;  
            padding: 8px;  
        }  
  
        tr:nth-child(even) {  
            background-color: #dddddd;  
        }