Last active
July 15, 2018 10:38
-
-
Save vimes1984/b6557f2b48fef3a6b6cbe6e30876cebf to your computer and use it in GitHub Desktop.
Html to PDF generator using a angularJS V1.x directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import domtoimage from 'dom-to-image-chrome-fix'; | |
import jsPDF from 'jspdf'; | |
import 'please-wait/build/please-wait.css'; | |
import 'spinkit/css/spinners/9-cube-grid.css'; | |
import { pleaseWait } from 'please-wait'; | |
angular.module('htmlToPdfSave', []); | |
angular.module('htmlToPdfSave') | |
.directive('pdfSaveButton', ['$rootScope', function ($rootScope) { | |
return { | |
restrict: 'A', | |
link: function (scope, element, attrs) { | |
element.on('click', function () { | |
window.loading_screen = pleaseWait({ | |
logo: 'imgs/LOGO.png', | |
backgroundColor: '#eaecec', | |
loadingHtml: '<h3 class="loading-message bold">Generating your .pdf now ...</h3><div class="sk-cube-grid"><div class="sk-cube sk-cube1"></div><div class="sk-cube sk-cube2"></div><div class="sk-cube sk-cube3"></div><div class="sk-cube sk-cube4"></div><div class="sk-cube sk-cube5"></div><div class="sk-cube sk-cube6"></div><div class="sk-cube sk-cube7"></div><div class="sk-cube sk-cube8"></div><div class="sk-cube sk-cube9"></div></div>' | |
}); | |
convert(); | |
function px2cm(px) { | |
var d = $("<div/>").css({ position: 'absolute', top: '-1000cm', left: '-1000cm', height: '1000cm', width: '1000cm' }).appendTo('body'); | |
var px_per_cm = d.height() / 1000; | |
d.remove(); | |
return px / px_per_cm; | |
} | |
function convert() { | |
var node = document.getElementById('pdfcontent'); | |
domtoimage.toPng(node, { quailty: 1 }) | |
.then(function (dataUrl) { | |
var img = new Image(); | |
img.src = dataUrl; | |
img.onload = function () { | |
var e = $('#pdfcontent'); | |
var width = e.width(); | |
var height = e.height(); | |
var pdf = new jsPDF({ | |
orientation: 'portrait', | |
unit: 'cm', | |
format: [px2cm(img.width) + 3, px2cm(img.height)] | |
}); | |
pdf.setFillColor(255, 255, 255); | |
pdf.rect(0, 0, px2cm(img.width), px2cm(img.height), 'F'); | |
pdf.addImage(img.src, 'png', 1.5, 2); | |
pdf.save('MY-PDF.pdf'); | |
window.loading_screen.finish(); | |
}; | |
}) | |
.catch(function (error) { | |
alert('oops, something went wrong!'); | |
window.loading_screen.finish(); | |
}); | |
} | |
}); | |
} | |
} | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Simple AngularJS V1 HTML to PDF generator ( requires,
npm install --save dom-to-image-chrome-fix
npm install --save jspdf
npm install --save please-wait
npm install --save spinkit
The output PDF name is hard coded on line
49
.The ID of the wrapper to of content you want to print is hardocded on line
31
.Inject into your AngularJS app with
app = angular.module('app', ["htmlToPdfSave"]);
Borrowed quite liberally from: https://github.com/hearsid/ng-html-to-pdf-save
This also includes a loading screen you can swap the logos on line:
18
This makes use of the following:
https://www.npmjs.com/package/dom-to-image-chrome-fix
https://github.com/MrRio/jsPDF
http://pathgather.github.io/please-wait/
http://tobiasahlin.com/spinkit/