欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

效果图:

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

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');
				});
		}

 

相关标签: html转pdf