zoukankan      html  css  js  c++  java
  • 页面导出成PDF

    将页面导出pdf

    在课堂评测系统v3版本中有用到,代码如下

    		/**
             * 导出PDF
             * @ dom 导入pdf 内容
             */
    		toPDF: function (dom) {
    			let pdfContentHeight = dom.offsetHeight;
    			let pdfContentWith = dom.offsetWith;
    			let copyDom = $("<div/>");
    			copyDom.addClass('super');
    			copyDom.width(pdfContentWith + "px");
    			copyDom.height(pdfContentHeight + "px");
    			$('body').append(copyDom);
    
    			html2canvas(dom, {
    				allowTaint: true,
    				height: pdfContentHeight,//给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 = 500;
    					var imgHeight = 500 / 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', 40, 0, imgWidth, imgHeight);
    					} else {
    						while (leftHeight > 0) {
    							pdf.addImage(pageData, 'JPEG', 40, position, imgWidth, imgHeight)
    							leftHeight -= pageHeight;
    							position -= 841.89;
    							//避免添加空白页
    							if (leftHeight > 0) {
    								pdf.addPage();
    							}
    						}
    					}
    					pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
    					//移除dom中添加的元素
    					$('.super').remove();
    
    				},
    				background: "#fff"
    			});
    
    		},
    		stuMonthTablePDF: function () {
    			let pdfDom = document.querySelector('.pdfContent');
    			this.toPDF(pdfDom);
    
    
    		},
    
  • 相关阅读:
    poj 3304线段与直线相交
    poj 1039 几何没思路
    zoj 1010 (线段相交判断+多边形求面积)
    poj 1654 Area (多边形求面积)
    poj 3348--Cows(凸包求面积)
    zoj 2107&&hdu 1007最近点对问题
    Codeforces Round #260 (Div. 2)AB
    MMORPG大型游戏设计与开发(part1 of net)
    MMORPG大型游戏设计与开发(规范)
    MMORPG大型游戏设计与开发(构架)
  • 原文地址:https://www.cnblogs.com/dzyany/p/14611691.html
Copyright © 2011-2022 走看看