Question

我一直在尝试生成如下所示的PDF表-

在这里，我想在每页的第一行显示上一页中打印的行的总距离。以及到该页面最后一行上该页面中打印的行的距离的总和。公式可以用以下等式描述：

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 plugin。我的问题是我找不到计数PDF中打印行的方法。

我想到了另一种方法来实现这一目标。我可以强制jsPDF在单个页面中绘制一定数量的行。但是我不知道如何指示jsPDF做到这一点。

任何帮助将不胜感激。

Answer 1

一种通过预先计算值来实现的方法

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

在PDF表格的每一页中显示两个默认行

1 个答案: