纯js实现页面html导出pdf（一）

最新推荐文章于 2024-08-08 07:59:25 发布

有翅膀的猪

最新推荐文章于 2024-08-08 07:59:25 发布

阅读量3.3k

点赞数

文章标签： Js html pdf

本文链接：https://blog.csdn.net/qq_38515673/article/details/80108943

版权

本文介绍如何使用JavaScript将动态生成且样式不固定的HTML页面转换为PDF格式，重点在于实现分页功能。

摘要由CSDN通过智能技术生成

页面导出pdf，因为我的页面是动态生成且样式是不固定的，故采用这种方式将html页面导出pdf格式，可以实现分页

	  	function $exportReportTemplet()	{
	  			    // 将 id 为preview_container 的 div 渲染成 canvas
	  			    html2canvas(document.getElementById("preview_container"), {
	  			        // 渲染完成时调用，获得 canvas
	  			        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;
				            //页面偏移
				            var position = 50;
				            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				            var imgWidth = 595.28;
				            var imgHeight = 592.28/contentWidth * contentHeight;
	  			            // 从 canvas 提取图片数据