Skip to content

Instantly share code, notes, and snippets.

@hanguyen1406

hanguyen1406/index.html

Created September 16, 2023 09:23
Show Gist options
  • Save hanguyen1406/d177cd3f7636e159b360714b75351fee to your computer and use it in GitHub Desktop.
Save hanguyen1406/d177cd3f7636e159b360714b75351fee to your computer and use it in GitHub Desktop.
Download ZIP
pdf download
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML to PDF 2 - techumber
</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />
</head>
<body>
<div class="ui page grid">
<div class="wide column">
<h1 class="ui header aligned center">HTML to PDF 2
</h1>
<div class="ui divider hidden">
</div>
<div class="ui segment">
<div class="ui button aligned center teal" id="create_pdf">Create PDF
</div>
<div class="ui divider">
</div>
<form class="ui form">
<h4 class="ui dividing header">Personal Information
</h4>
<div class="two fields">
<div class="field">
<label for="">First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label for="">Last Name</label>
<input type="text" name="last-name" placeholder="First Name">
</div>
</div>
<div class="field">
<label>Biography</label>
<textarea></textarea>
</div>
<div class="field">
<label>Age</label>
<input type="number" placeholder="Age">
</div>
<h4 class="ui dividing header">Account Info
</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui dividing header">Account Info
</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui dividing header">Account Info</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui dividing header">Account Info
</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui dividing header">Shipping Information</h4>
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="shipping[first-name]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="shipping[last-name]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Billing Address</label>
<div class="fields">
<div class="twelve wide field">
<input type="text" name="shipping[address]" placeholder="Street Address">
</div>
<div class="four wide field">
<input type="text" name="shipping[address-2]" placeholder="Apt #">
</div>
</div>
</div>
<h4 class="ui dividing header">Full Name
</h4>
<div class="three fields">
<div class="field">
<label>First name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Middle name</label>
<input type="text" placeholder="Middle Name">
</div>
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
<h4 class="ui top attached header">Import Settings
</h4>
<div class="ui bottom attached segment">
<div class="grouped fields">
<label for="alone">Would you like us to import your current settings?</label>
<div class="field">
<div class="ui checkbox">
<input type="radio" checked="" name="import">
<label>Yes</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="radio" name="import">
<label>No</label>
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Settings
</h4>
<h5 class="ui header">Privacy
</h5>
<div class="field">
<div class="ui checkbox">
<input type="radio" name="privacy">
<label>Allow<b>anyone</b> to see my account</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="radio" name="privacy">
<label>Allow<b>only friends</b> to see my account</label>
</div>
</div>
<h5 class="ui header">Newsletter Subscriptions
</h5>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="top-posts">
<label>Top Posts This Week</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hot-deals">
<label>Hot Deals</label>
</div>
</div>
<div class="ui hidden divider">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hot-deals">
<label>I agree to the<a href="#">Terms of Service</a>.</label>
</div>
</div>
<div class="ui error message">
<div class="header">We noticed some issues
</div>
</div>
<div class="ui submit button blue">Register
</div>
</form>
</div>
</div>
</div>
<!-- scripts -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js">
</script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js">
</script>
-->
<script src="./lib/jquery.min.js">
</script>
<script type="text/javascript" src="./lib/jspdf.min.js">
</script>
<script type="text/javascript" src="./lib/html2canvas.min.js">
</script>
<script type="text/javascript" src="app.js">
</script>
</body>
</html>
Raw
script.js
var form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 990.89]; // for a4 size paper width and height
var canvasImage,
winHeight = a4[1],
formHeight = form.height(),
formWidth = form.width();
var imagePieces = [];
// on create pdf button click
$('#create_pdf').on('click', function() {
$('body').scrollTop(0);
imagePieces = [];
imagePieces.length = 0;
main();
});
// main code
function main() {
getCanvas().then(function(canvas){
canvasImage = new Image();
canvasImage.src= canvas.toDataURL("image/png");
canvasImage.onload = splitImage;
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
// chop image horizontally
function splitImage(e) {
var totalImgs = Math.round(formHeight/winHeight);
for(var i = 0; i < totalImgs; i++) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = formWidth;
canvas.height = winHeight;
// source region dest. region
ctx.drawImage(canvasImage, 0, i * winHeight, formWidth, winHeight, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL("image/png"));
}
console.log(imagePieces.length);
createPDF();
}
// crete pdf using chopped images
function createPDF() {
var totalPieces = imagePieces.length - 1;
var doc = new jsPDF({
unit: 'px',
format: 'a4'
});
console.log(imagePieces)
imagePieces.forEach(function(img){
doc.addImage(img, 'JPEG', 20, 40);
if(totalPieces)
doc.addPage();
totalPieces--;
});
doc.save('techumber-html-to-pdf.pdf');
form.width(cache_width);
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment