jQuery export PDF with jspdf api in Zk

1. Download jspdf api https://mrrio.github.io/jsPDF/examples/basic.html

2. Download  html2canvas api. https://html2canvas.hertzen.com/

3. If you need multiple page PDF then download canvas2image api. https://github.com/hongru/canvas2image

Javascript code.

var form;

function initPDF(target) {

form = $('.' + target), cache_width = form.width(), a4 = [ 595.28, 841.89 ]; // for a4 size paper width and height

}

// create pdf

function createPDF(fileName) {

$('body').scrollTop(0);

getCanvas().then(function(canvas) {

var img = canvas.toDataURL("image/png"), doc = new jsPDF({

unit : 'px',

format : 'a4'

});

doc.addImage(img, 'JPEG', 20, 20);

var image = new Image();

image = Canvas2Image.convertToJPEG(canvas);

var croppingYPosition = 1095;

count = (image.height) / 1095;

for (var i = 1; i < count; i++) {

doc.addPage();

var sourceX = 0;

var sourceY = croppingYPosition;

var sourceWidth = image.width;

var sourceHeight = 1095;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = 0;

var destY = 0;

var canvas1 = document.createElement('canvas');

canvas1.setAttribute('height', destHeight);

canvas1.setAttribute('width', destWidth);

var ctx = canvas1.getContext("2d");

ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

var image2 = new Image();

image2 = Canvas2Image.convertToJPEG(canvas1);

image2Data = image2.src;

doc.addImage(image2Data, 'JPEG', 20, 20);

croppingYPosition += destHeight;

}

doc.save(fileName + '.pdf');

form.width(cache_width);

});

}

// create canvas object

function getCanvas() {

form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');

return html2canvas(form, {

imageTimeout : 2000,

removeContainer : true

});

}

ViewModel Code.

Just pass the div css class name.

public void initPDF(String className) {

Clients.evalJavaScript("initPDF('" + className + "');");

}

public void exportHTMLTOPDF(String className) {

Clients.evalJavaScript("createPDF('" + className + "');");

}