Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hello I met a problem generating a multi-page PDF file that was left blank in the header and footer, using jsPDF and html2Canvas. #1517

Closed
dingyanhe opened this issue Nov 15, 2017 · 3 comments
Closed

Hello I met a problem generating a multi-page PDF file that was left blank in the header and footer, using jsPDF and html2Canvas. #1517

dingyanhe opened this issue Nov 15, 2017 · 3 comments
Labels
html2canvas.js

Comments

@dingyanhe
Copy link

The idea is to make the HTML a canvas with a canvas, and then calculate the position of the displayed image based on a single page, but the bottom of the first page will be full and the top and bottom will be full from the second page. Is there a good solution?

1

Code:
This example can be used directly.
`

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdn.bootcss.com/jspdf/1.3.5/jspdf.debug.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> <title>Export PDF</title> <style> table td { height: 55px; line-height: 55px; text-align: center; } table td, table th{ background:#ccc; } table{ background: #fff; width: 100%; } </style> 
<table id="export">
	<tbody>
		<tr>
			<th style="width: 15%">th1</th>
			<th style="width: 15%">th2</th>
			<th style="width: 13%">th3</th>
			<th style="width: 12%">th4</th>
			<th style="width: 13%">th5</th>
			<th style="width: 12%">th6</th>
			<th style="width: 17%">th7</th>
		</tr>
		<tr>
			
			<td>1001</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1002</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1003</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1004</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1005</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1006</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1007</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1008</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1009</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1010</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1011</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1012</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1013</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1014</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1015</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1016</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1017</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1018</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1019</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1020</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1021</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1022</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1023</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1024</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1025</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1026</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1027</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1028</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1001</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1002</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1003</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1004</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1005</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1006</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1007</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1008</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1009</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1010</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			
			<td>1011</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1012</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			
			<td>1013</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			
			<td>1014</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1015</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1016</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1017</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1018</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1019</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1020</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1021</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1022</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1023</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1024</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1025</td>
			<td>2017-10-15</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name1</td>
			<td>name1</td>
		</tr>
		<tr>
			<td>1026</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>yyy</td>
			<td>name2</td>
			<td>name2</td>
		</tr>
		<tr>
			<td>1027</td>
			<td>2017-10-20</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
		<tr>
			<td>1028</td>
			<td>2017-10-12</td>
			<td>zzz</td>
			<td>xxx</td>
			<td>zzz</td>
			<td>name3</td>
			<td>name3</td>
		</tr>
	</tbody>
</table>
<script>
	$(function(){
		var table = $('#export').get(0);
		console.log(table);
		
		html2canvas(table, {
			onrendered: function(canvas){
				$('body').append(canvas);
				var contentWidth = canvas.width;
				var contentHeight = canvas.height;
				
				
				// pdf页面的偏移
				var position = 20,
						x = 20,
						y = 0;
				
				// 一页pdf显示html页面生成的canvas高度;
				var pageHeight = (contentWidth / 595.28 * 841.89);
				// 未生成pdf的html页面高度 、用来计算分页
				var restHeight = contentHeight;
				
				
				// 最终用来显示的文本
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 595.28 - position * 2;  // 595.28 - 20 -20 
				var imgHeight = imgWidth / contentWidth * contentHeight - position * 2; // 等比例缩放
				// var imgHeight = 841.89 - position * 2
				var pageData = canvas.toDataURL('image/jpeg', 1.0);
				
				// 第一个参数是方向，第二个参数是单位，第三个参数是纸张类型
				var pdf = new jsPDF('', 'pt', 'a4');
                  //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                  //当内容未超过pdf一页显示的范围，无需分页
                  
                  if (restHeight < pageHeight) { // 只有一页
                      pdf.addImage(pageData, 'JPEG', x, position, imgWidth, imgHeight);
                  } else { // 2页以上
                      while(restHeight > 0) {
                    	  pdf.addImage(pageData, 'JPEG', x, position + y, imgWidth, imgHeight);
                          restHeight -= pageHeight;
                          y -= 841.89;
                          //避免添加空白页
                          if(restHeight > 0) {
                              pdf.addPage();
                          }
                      } 
                  }
                  pdf.save('content.pdf');
			}
		});
	});
</script>
`
@Uzlopak
Copy link
Collaborator

Uzlopak commented Nov 16, 2017

#1450 ?

@dingyanhe
Copy link
Author

dingyanhe commented Nov 17, 2017 •
edited
Loading

thank you @arasabbasi , I use addHTML (), the effect is not very good. Margin does not work. I only modified the script code. Can run.
<script> $(function(){ const doc = jsPDF('', 'pt', 'A4'); doc.addHTML( document.getElementById('export'), 10, 10, { pagesplit: true, margin: { top: 10, right: 10, bottom: 10, left: 10, useFor: 'page' } }, function () { doc.save("test.pdf") } ) }); </script>
The effect is as follows：
bm dvng5u 1abkhkafk w f

@Uzlopak
Copy link
Collaborator

Uzlopak commented Nov 17, 2017

Well if you only change your own code but not the addhtml code, then obviously it will not work.

@Uzlopak Uzlopak closed this as completed Sep 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html2canvas.js
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Uzlopak @dingyanhe