js实现将html转化成pdf【基于浏览器端插件jsPDF】

程序员文章站 2024-01-18 22:57:58

...

效果图：

1. 先导入插件的两个js

<script src="${baseResourcePath}/js/pdf/html2canvas.js"></script>
<script src="${baseResourcePath}/js/pdf/jspdf.debug.js"></script>

下载地址：https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js

2. html2canvas官方示例

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

3. 根据示例写自己需要的js

效果图代码：(不支持分页)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/pdf/html2canvas.js"></script>
		<script src="js/pdf/jspdf.debug.js"></script>
	</head>
	<style>
		.div1 {
			width: 100%;
			height: 1100px;
		}
		
		.btn {
			width: 100px;
			height: 34px;
			font-size: 14px;
			font-family: PingFangSC-Regular;
			color: rgba(255, 255, 255, 1);
			background: rgba(76, 132, 255, 1);
			border-radius: 2px;
			border: 1px solid rgba(76, 132, 255, 1);
			padding: 0px;
			text-align: center;
			line-height: 34px;
		}
		
		.title {
			font-size: 20px;
			font-weight: bold;
		}
		
		.ccontent {
			font-size: 16px;
		}
		
		.img {
			float: left;
			width: 300px;
			height: 300px;
		}
		
		#exportdata {
			background: cornsilk;
			width: 50%;
			height: 100%;
		}
	</style>

	<body>
		<div class="div1">
			<div class="btn" onclick="exportData()">导出pdf</div>
			<div id="exportdata">
				<div class="title">SQL 是一种标准 - 但是... </div>
				<div class="ccontent">SQL 是一门 ANSI 的标准计算机语言，用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。 SQL 可与数据库程序协同工作，比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。 不幸地是，存在着很多不同版本的 SQL 语言，但是为了与 ANSI 标准相兼容，它们必须以相似的方式共同地来支持一些主要的关键词 （比如 SELECT、UPDATE、DELETE、INSERT、WHERE 等等）。 注释：除了 SQL 标准之外，大部分 SQL 数据库程序都拥有它们自己的私有扩展！</div>
				<img src="img/哈哈.jpg" class="img">
				<img src="img/chaiquan.jpg" class="img">
			</div>
		</div>
	</body>

</html>
<script>
	function exportData() {
		html2canvas(document.getElementById("exportdata"), {//到导出的部分的id
			onrendered: function(canvas) {
				var imgData = canvas.toDataURL('image/jpeg');
				//初始化pdf，设置相应格式
				var doc = new jsPDF("p", "mm", "a4");

				//这里设置的是a4纸张尺寸
				doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);

				//保存时的文件名，自行设置，这里输出保存命名为www.pdf
				doc.save('www.pdf');
			}
		});
	}
</script>

注意：导出的pdf默认的背景为黑色，最好给要导出的部分一个背景色。

4. 支持分页的方法

function exportData() {
		html2canvas(document.getElementById("exportdata"), {
				onrendered: function(canvas) {

					var contentWidth = canvas.width;
					var contentHeight = canvas.height;

					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 592.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//pdf页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28;
					var imgHeight = 592.28 / contentWidth * contentHeight;

					var pageData = canvas.toDataURL('image/jpeg', 1.0);

					var pdf = new jsPDF('', 'pt', 'a4');

					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					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('www.pdf');
				});
		}

js实现将html转化成pdf【基于浏览器端插件jsPDF】

js实现将html转化成pdf【基于浏览器端插件jsPDF】

JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】