function html2pdf(source, target, optPDF, margin, dpi) {
// Source may be an HTML string or a DOM element.
// html2pdf_makeTemplate draws the Source onto an overlay on-screen.
// html2canvas turns that into a canvas.
// html2pdf_makePDF uses that canvas to make a PDF.
// Default options
if (!source) return;
target = target || 'file.pdf';
optPDF = optPDF || {};
if (typeof margin !== 'number') margin = 1;
dpi = dpi || 144;
// Get info (page width, height, and units) that will be used by jsPDF
var info = jsPDF_getSize(optPDF);
// Calculate the div size (without margin) and aspect ratio
var optCanvas = {width: info.width - margin*2, height: info.height - margin*2};
optCanvas.ratio = optCanvas.height / optCanvas.width;
// Make the template div that will be used as a model for the canvas
var divs = html2pdf_makeTemplate(source, optCanvas, info);
// Make the canvas, which will make the PDF once it's rendered
var canvasOptions = {
letterRendering: true,
dpi: dpi,
onrendered: function(canvas) {
document.body.removeChild(divs.overlay);
html2pdf_makePDF(canvas, target, optCanvas, optPDF, margin);
}
};
html2canvas(divs.template, canvasOptions);
}
function html2pdf_makeTemplate(source, optCanvas, info) {
// CSS helper function
function setStyle(element, style) {
for (var key in style)
element.style[key] = style[key];
}
// Set up the CSS for the template and its parent overlay
overlayCSS = {
position: 'fixed', backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
left: 0, right: 0, bottom: 0, top: 0 };
templateCSS = {
position: 'absolute', backgroundColor: 'white', zIndex: 1001,
left: 0, right: 0, top: 0, height: 'auto',
margin: 'auto', width: optCanvas.width + info.unit };
// Set the overlay and template to be invisible
overlayCSS.overflow = 'hidden';
// overlayCSS.fontVariantLigatures = 'no-common-ligatures';
overlayCSS.fontFeatureSettings = '"liga" 0';
overlayCSS.opacity = 0;
// 2016-08-30:
// Attempts to increase the canvas *drawing* resolution (dpi isn't solving the problem)
// Transform: scale doesn't work with html2canvas //templateCSS.transform = 'scale(2)';
// Zoom 200% (below) seems to help a bit
//templateCSS.zoom = '200%';
// Create the template div that will be used as a model for the canvas
if (typeof source === 'string') {
var template = document.createElement('div');
template.innerHTML = source;
} else {
var template = source.cloneNode(true);
}
// Create the overlay and set styles
var overlay = document.createElement('div');
setStyle(overlay, overlayCSS);
setStyle(template, templateCSS);
// Set overlay/template classes
overlay.className = 'html2pdf__overlay';
template.className += ' html2pdf__template';
// Attach template and overlay to the document
overlay.appendChild(template);
document.body.appendChild(overlay);
// Return handles to the created divs
var divs = {overlay: overlay, template: template};
return divs;
}
function html2pdf_makePDF(canvas, target, optCanvas, optPDF, margin) {
// return document.body.appendChild(canvas);
// Make the PDF and get canvas context
var pdf = new jsPDF(optPDF);
var ctx = canvas.getContext('2d');
// Break full canvas into pages
var fullHeight = canvas.height;
var pageHeight = Math.floor(canvas.width * optCanvas.ratio);
var nPages = Math.ceil(fullHeight / pageHeight);
// Capture the full canvas image, then reduce it to one page
var imgFull = ctx.getImageData(0, 0, canvas.width, canvas.height);
canvas.height = pageHeight;
// Loop through each page
for (var page=0; page pageHeight) {
tmp = pageWidth;
pageWidth = pageHeight;
pageHeight = tmp;
}
} else if (orientation === 'l' || orientation === 'landscape') {
orientation = 'l';
if (pageHeight > pageWidth) {
tmp = pageWidth;
pageWidth = pageHeight;
pageHeight = tmp;
}
} else {
throw('Invalid orientation: ' + orientation);
}
// Return information (k is the unit conversion ratio from pts)
var info = { 'width': pageWidth, 'height': pageHeight, 'unit': unit, 'k': k };
return info;
}