62017May
1

Generate Multiple Pages PDF Using JSPDF Plugin – Multipage JSPDF Example

By / In Jquery / Comments(0)

Below is the running example for Multiple Pages PDF using JSPDF Plugin. This example includes usage of multiple components of JSPDF plugin like drawing a rectangle for heading, word wrap so that words doesn’t flow over, adding a page on run time, setting font size etc.

JS Need to Include (Click To Download)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS PDF</title>
	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jspdf.min.js"></script>
</head>
<body>
    <script type="text/javascript">
		$(function () {
		  $('#cmd').click(function () {
			var doc = new jsPDF();
			doc.rect(48, 10, 110, 50);
			doc.setFontSize(10);
			doc.text(50, 20, "Sample Data");
			doc.text(50, 30, "Sample Data");
			doc.text(50, 40, "Sample Data");
			doc.text(50, 50, "Sample Data");
			
			doc.text(90, 20, ":");
			doc.text(90, 30, ":");
			doc.text(90, 40, ":");
			doc.text(90, 50, ":");
			
			doc.text(100, 20, "JSPDF");
			doc.text(100, 30, doc.splitTextToSize('Word wrap Example !! Word wrap Example !! Word wrap Example !!', 60));
			doc.text(100, 40, "Multi Page PDF");
			doc.text(100, 50, "Plugin");
			
			doc.rect(5, 70, 200, 10);
			doc.setFontSize(8);
			doc.text(6, 76, "Title");
			doc.text(34, 76, "Title");
			doc.text(65, 76, "Title");
			doc.text(80, 76, "Title");
			doc.text(105, 76, "Title");
			doc.text(130, 76, "Title");
			doc.text(155, 76, "Title");
			doc.text(184, 76, "Title");
			
			var startHeight = 76;
			var noOnFirstPage = 21;
			var noOfRows = 28;
			var z = 1;
			for (i = 1; i <= 1000; i++) {
				if(i <= noOnFirstPage){
					startHeight = startHeight +10;
					addData(startHeight,doc);
				}else{
					if(z ==1 ){
						startHeight = 0;
						doc.addPage();
					}
					if(z <= noOfRows){
						startHeight = startHeight +10;
						addData(startHeight,doc);
						z++;
					}else{
						z = 1;
					}
				}
				
			}
			//To View
			doc.output('datauri');
			
			//To Save
			//doc.save('samplePdf');
		  });
		});
		
		function addData(height, doc){
			doc.text(6, height, "Aweome");
			doc.text(34, height, "JS");
			doc.text(65, height, "Multi");
			doc.text(80, height, "Page");
			doc.text(105, height, "PDF");
			doc.text(130, height, "Plugin");
			doc.text(155, height, "Front");
			doc.text(185, height, "End");
		}
		
		
		
    </script>
	<button id="cmd">generate PDF</button>
</body>
</html>