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);
    
    
    		},
    
  • 相关阅读:
    how to use http.Agent in node.js
    How Node.js Multiprocess Load Balancing Works
    Child Process
    What does cmd /C mean? [closed] 关于nodejs的子进程部分
    Net
    二进制与十六进制的关系
    POJ 1201 Intervals (差分约束系统)
    POJ 1201 Intervals (差分约束系统)
    差分约束系统
    差分约束系统
  • 原文地址:https://www.cnblogs.com/dzyany/p/14611691.html
Copyright © 2011-2022 走看看