HTML页面导出为PDF

最新推荐文章于 2024-03-31 14:27:36 发布

qq_251025116

最新推荐文章于 2024-03-31 14:27:36 发布

阅读量180

点赞数

分类专栏：前端 vue js 文章标签： html5 echarts html javascript

本文链接：https://blog.csdn.net/qq_24882601/article/details/120197552

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

话不多说，直接上代码，需要注意的是需要手动设置下背景颜色，不然的话有可能生成的pdf是黑色的。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js"></script>
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
		<title></title>
		<style type="text/css">
			* {
				background: white;
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<button id="export">导出PDF</button>
		<div id="demo">
			<p style="height: 2000px;background: red;">内容</p>
			<div class="tab-pane fade" id="sheet" role="tabpanel">
				<div id="compare_price" style="width:600px;height:400px;">
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('compare_price'));
		var pr = "<%=price%>";
		var pri = pr.split(" ");
		// 指定图表的配置项和数据
		var option = {
			backgroundColor: 'white', //背景色
			title: {
				text: '价格比对'
			},
			tooltip: {
				show: true
			},
			legend: {
				data: ['价格']
			},
			xAxis: {
				data: ["淘宝", "唯品会", "苏宁易购"]
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				name: '价格',
				type: 'bar',
				data: [15, 25, 36]
    }]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		function download() {
			var element = $("#demo"); // 这个dom元素是要导出pdf的div容器
			var w = element.width(); // 获得该容器的宽
			var h = element.height(); // 获得该容器的高
			var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
			var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
			var canvas = document.createElement("canvas");
			var abs = 0;
			var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
			var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
			if (win_o > win_i) {
				abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
			}
			canvas.width = w * 2; // 将画布宽&&高放大两倍
			canvas.height = h * 2;
			var context = canvas.getContext("2d");
			context.scale(2, 2);
			context.translate(-offsetLeft - abs, -offsetTop);
			// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此  
			// translate的时候，要把这个差值去掉
			html2canvas(element).then(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;
				//页面偏移
				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('测试.pdf');
			})
		}



		$("#export").click(function() {
			download();
		});
	</script>
</html>

qq_251025116

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML页面导出为PDF

话不多说，直接上代码，需要注意的是需要手动设置下背景颜色，不然的话有可能生成的pdf是黑色的。<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl
复制链接

扫一扫