Отображение двух строк по умолчанию на каждой странице таблицы в PDF - PullRequest
Новая
       24

Отображение двух строк по умолчанию на каждой странице таблицы в PDF

0 голосов
/ 24 октября 2018

Я пытался сгенерировать таблицы в формате PDF, как показано ниже -

enter image description here

Здесь я хочу показать общее количество расстояний от напечатанных строкна предыдущей странице в первом ряду каждой страницы.А также общее расстояние от строк, которые печатаются на этой странице в последнем ряду этой страницы.Формула может быть описана следующими уравнениями: 

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

Я использовал для этого плагин jsPDF-AutoTable .Моя проблема в том, что я не смог найти способ подсчета напечатанных строк в PDF.

Я подумал о другом способе достижения этого.Я мог бы заставить jsPDF рисовать определенное количество строк на одной странице.Но я не знаю, как поручить jsPDF сделать этот трюк.

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 27 октября 2018

Один из способов сделать это, предварительно рассчитав значения 

<!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>

Демонстрация в реальном времени - https://jsfiddle.net/mkawserm/0bg8cpft

Другой способ, но неправильно отформатированный 

<!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>

Живая демоверсия - https://jsfiddle.net/mkawserm/12ftobda

...