CODEWITHSUNDEEP
javascriptjspdfjspdf-autotable
ni8mr
ni8mr

Reputation: 1785

Showing two default rows in every page in table in PDF

I have been trying to generate tables in PDF like following -

enter image description here

Here, I want to show total of distances from rows that are printed in the previous page at the first row of every page. And also total of distances from rows that are printed in that page at the last row of that page. Formula can be described with following equations:

distances_from_previous = total of values of column **Distance (KM)** printed at previous page
distances_carried_forward = total of values of column **Distance (KM)** printed at current page + distance_from_previous_page

I have used jsPDF-AutoTable plugin for this. My problem is that I couldn't find a way to count printed rows in PDF.

I have thought of another way of achieving this. I could force jsPDF to draw certain amount of rows in a single page. But I don't know how to instruct jsPDF to do this trick.

Any help would be appreciated.

Upvotes: 0

Views: 2071

Answers (1)

kawser
kawser

Reputation: 76

One way of doing this by pre calculating values

<!DOCTYPE html>
<html>
<head>
<title>JS PDF experiment</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>

<script>
    function demoFromHTML() {

		var doc = new jsPDF('p', 'pt','a4');
		//for a4 size paper 33 rows can fit with current settings
		//so we will reserve 2 rows for additional data 
		//and other 31 rows will be used as normal row data

    	var oldDistance = 0;
    	var currentDistance = 0;

    	var columns = [
    		"Date","Time","Distance (KM)"
    	];
    	//data creation
    	var rows = [];
    	var limit = 1000;
	    for(var i=0;i<limit;++i){
	    	var d = Number(Number(Math.random() * 10).toFixed(2));

	    	if(i%31 === 0){
	    		rows.push(["","Distance from previous",oldDistance.toFixed(2)]);
	    	}

	    	rows.push([ (i+1) +". 28/10/2011","10:00 AM",d]);
	    	currentDistance = currentDistance+ d;

	    	if(i%31 === 30 || i===(limit-1)){
	    		oldDistance = currentDistance;
	    		rows.push(["","Distance carried towards",currentDistance.toFixed(2)]);	
	    	}
	    }

		doc.autoTable(columns, rows, {
		    margin: {top: 60}
		});
		doc.save('Table1.pdf');
}
</script>

</head>

<body>

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
</div>


</body>
</html>

Live demo - https://jsfiddle.net/mkawserm/0bg8cpft

Another way but not formatted properly

<!DOCTYPE html>
<html>
<head>
<title>JS PDF experiment</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>

<script>
    function demoFromHTML() {
    	var oldDistance = 0;
    	var currentDistance = 0;
    	var pageCount = 0;

    	var columns = [
    		"Date","Time","Distance (KM)"
    	];



    	var rows = [];
	    for(var i=0;i<1000;++i){
	    	var d = Number(Number(Math.random() * 10).toFixed(2));
	    	rows.push([ (i+1) +". 28/10/2011","10:00 AM",d]);
	    }
 
		var doc = new jsPDF('p', 'pt','a4');
		doc.autoTable(columns, rows, {
		    
		    margin: {top: 60},
		    
		    addPageContent: function(data) {
		    	doc.text("Distance from previous: "+oldDistance.toFixed(2)+" KM", 300, 15);
		        doc.text("Distance carried towards: "+currentDistance.toFixed(2)+" KM", 300, 810);
		    },
		    drawRow: function (row, data) {
		    	if(data.pageCount !== pageCount){
		    		pageCount = data.pageCount;
		    		oldDistance = currentDistance;
		    		currentDistance = oldDistance+row.raw[2];
		    	}
		    	else{
		    		currentDistance = currentDistance + row.raw[2];
		    	}
		    }
		});
		doc.save('Table2.pdf');
}
</script>

</head>

<body>

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
</div>


</body>
</html>

Live demo - https://jsfiddle.net/mkawserm/12ftobda

Upvotes: 1

Related Questions