HTML to PDF

Developer
Michel Makei Gefuni
Size
2,946 Kb
Views
6,072
  1. HTML to PDF Previews
  2. HTML to PDF HTML Codes
  3. HTML to PDF CSS Codes
  4. HTML to PDF JS Codes

How do I make an html to pdf?

Simple code to export a specific area from page to PDF. What is a html to pdf? How do you make a html to pdf? This script and codes were developed by Michel Makei Gefuni on 07 December 2022, Wednesday.

HTML to PDF Previews
IQ Test

HTML to PDF - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML to PDF</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container form" id="form"> <div class="row title hidden-print"> <div class="col-sm-6"> <h1>HTML to PDF</h1> </div> <div class="col-sm-6 text-right"><a class="btn btn-success" id="exportForm">Export page</a></div> </div> <div id="first-page"> <div class="row title"> <div class="col-sm-12"> <h2>First Page</h2> </div> </div> <div class="row"> <div class="col-sm-3 form-group"> <label>First Name</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Last Name</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Birthday</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Email Address</label> <input class="form-control"/> </div> </div> <div class="row hidden-print"> <div class="col-sm-12 form-group"> <label>Bio</label> <textarea class="form-control"></textarea> </div> </div> </div> <div id="second-page"> <div class="row title"> <div class="col-sm-12"> <h2>Second Page</h2> </div> </div> <div class="row"> <div class="col-sm-3 form-group"> <label>First Name</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Last Name</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Birthday</label> <input class="form-control"/> </div> <div class="col-sm-3 form-group"> <label>Email Address</label> <input class="form-control"/> </div> </div> <div class="row"> <div class="col-sm-12 form-group"> <label>Bio</label> <textarea class="form-control"></textarea> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML to PDF - Script Codes CSS Codes

body { padding: 10px;
}
* { background-color: #fff;
}
h1 { margin-top: 0;
}
h2 { margin-top: 40px;
}
.form { padding: 20px;
}
.form .title { margin-bottom: 60px;
}
.form .row:nth-child(even) { padding-bottom: 20px; margin-bottom: 30px; border-bottom: #ccc thin solid;
}

HTML to PDF - Script Codes JS Codes

$('#exportForm').click(function(){ var pdf = new jsPDF('a', 'mm', 'a4'); var firstPage; var secondPage; html2canvas($('#first-page'), { onrendered: function(canvas) { firstPage = canvas.toDataURL('image/jpeg', 1.0); } }); html2canvas($('#second-page'), { onrendered: function(canvas) { secondPage = canvas.toDataURL('image/jpeg', 1.0); } }); setTimeout(function(){ pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0); pdf.addPage(); pdf.addImage(secondPage, 'JPEG', 5, 5, 200, 0); pdf.save("export.pdf"); }, 150);
});
HTML to PDF - Script Codes
HTML to PDF - Script Codes
Home Page Home
Developer Michel Makei Gefuni
Username michelgefuni
Uploaded December 07, 2022
Rating 3
Size 2,946 Kb
Views 6,072
Do you need developer help for HTML to PDF?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michel Makei Gefuni (michelgefuni) Script Codes
Name
Simple Accordion JQuery
Charts using ChartJS
Columns with equal height
Arrow CSS
Display a form from a select
Responsives Squares CSS
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!