jsp页面直接生成pdf 所用js:html2canvas.js,jspdf.debug.js

huofeige

已于 2022-07-13 18:39:08 修改

阅读量1.3k

点赞数

分类专栏： java js 文章标签： javascript

于 2022-07-13 18:35:13 首次发布

本文链接：https://blog.csdn.net/qq_41607516/article/details/125770101

版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

java

3 篇文章

订阅专栏

该博客介绍了如何通过JavaScript库html2canvas和jspdf将HTML内容转换为PDF文件。首先，引入两个必要的js文件，然后定义一个printpagePdf函数，隐藏打印按钮和PDF容器。接下来，利用html2canvas将HTML表格转化为canvas，再根据canvas内容生成不同页面的PDF，并保存为'send.pdf'。这个过程涉及到了网页内容的捕获、图像处理和PDF生成技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需要准备3个js

(1)html2canvas.js

(2)jspdf.debug.js

2.js部分代码段

function printpagePdf(){
	var printButton = document.getElementById("printpagebutton");
	printButton.style.visibility = 'hidden';
	var printPdf   = document.getElementById("printPdf");
	printPdf.style.visibility = 'hidden';
	
	html2canvas(
	document.getElementById("pdf_table"), {onrendered:function(canvas) {
		var contentWidth = canvas.width;
		var contentHeight = canvas.height;
		var pageHeight = contentWidth / 592.28 * 841.89;
		var leftHeight = contentHeight;
		var position = 0;
		var imgWidth = 595.28;
		var imgHeight = 592.28/contentWidth * contentHeight;
		var pageData = canvas.toDataURL('image/jpeg', 1.0);
		var pdf = new jsPDF('', 'pt', 'a4');
		if (leftHeight < pageHeight) {
		       pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
		}else{
			while(leftHeight > 0) {
				pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
				leftHeight -= pageHeight;
				position -= 841.89;
			    //避免添加空白页
				if(leftHeight > 0) {
				    pdf.addPage();
				}
			}
		}
		pdf.save('send.pdf');
	}
  }
  );
}

3.jsp页面代码