精华内容
下载资源
问答
  • js打印html页面指定内容

    千次阅读 2017-12-20 17:09:02
    js打印html页面指定内容? 文章发布日期: 2017-12-20 文章更新日期:2018-01-08 添加demo下载 下载地址 传送门->点击去下载 声明,所有的打印页面都叫,index.html 使用table2...

    【一起探讨,微信公众号:qdgithub】

    js打印html页面中的指定内容?

    文章发布日期: 2017-12-20
    文章更新日期:2018-01-08 添加demo下载

    下载地址

    传送门->点击去下载

    声明,所有的打印页面都叫,index.html

    使用table2excel.js直接下载table数据到excel中

    获取table2excel.js文件

    github:table2excel.js点击去取

    使用步骤

    1. 在html页面中引入jquery,版本要注意。

    点开上面的链接,打开table2excel.jquery.json的文件,dependencies(依赖项)要求jquery>=1.4
    所以呢,你需要有个jquery,并把它引入到index.html中。我使用的jquery版本是v1.11.3

    1. 网上随便找一个 table,顺手甩在index.html里。
     <table id="dataTable" class="table2excel" data-tableName="Test Table 1">
        <thead>
          <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
          <tr><td>This Should get exported as a header</td><td>This should too</td></tr>
        </thead>
        <tbody>
          <tr>
            <td>data1a with a <a href="#">link one</a> and <a href="#">link two</a>.</td>
            <td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
          <tr>
            <td>data2a with a <input tyle="text" value="text value">.</td>
            <td>data2b with a <input tyle="text" value="second text value">.</td>
          </tr>
        </tbody>
        <tfoot>
          <tr><td colspan="2">This footer spans 2 cells</td></tr>
        </tfoot>
      </table>
    
    1. 在index.html里引入table2excel.js,然后调用,就可以下载了
    $(function(){
      $(".table2excel").table2excel({
        exclude: ".noExl",
        name: "Excel Document Name",
        filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),
        fileext: ".xls",
        exclude_img: true,
        exclude_links: true,
        exclude_inputs: true
      });	
    });
    

    下载excel,简单实现,带源码,想看就看不看跳过

    贴出源码

    //打印表格
    var idTmr;
    
    function getExplorer() {
        var explorer = window.navigator.userAgent;
        if(explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }else if(explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }else if(explorer.indexOf("Chrome") >= 0) {
            return 'Chrome';
        }else if(explorer.indexOf("Opera") >= 0) {
            return 'Opera';
        }else if(explorer.indexOf("Safari") >= 0) {
            return 'Safari';
        }
    }
    
    function method5(tableid) {
        if(getExplorer() == 'ie') {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;
    
            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
                    "Excel Spreadsheets (*.xls), *.xls");
            } catch(e) {
                print("Nested catch caught " + e);
            } finally {
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }
    
        } else {
            tableToExcel(tableid)
        }
    }
    
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
            base64 = function(
                s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            }
        return function(table, name) {
            if(!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
    

    使用步骤

    直接调用method5()把table的id传进去
    如:method5(‘dataTable’)

    使用printArea打印table数据,调用浏览器自带打印设备可预览

    使用步骤

    1. 引入jquery,布置好table

    布局table时注意,如果想引入table的样式,需嘘嘘

    <div id="gridtable">
      <style type="text/css">
        table.gridtable {
          font-family: verdana, arial, sans-serif;
          font-size: 11px;
          color: #333333;
          border-width: 1px;
          border-color: #666666;
          margin: 0 auto;
          border-collapse: collapse;
        }
        
        table.gridtable th {
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #666666;
        }
        
        table.gridtable td {
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #666666;
          background-color: #ffffff;
        }
      </style>
      <table width="90%" class="gridtable">
        <caption><h1>XX市医疗保险特药使用申请表</h1></caption>
        
        <tr>
          <td colspan='5'>申请单号</td>
          <td colspan='2'>申请日期:XXX年XX月XX日</td>
        </tr>
        <tr>
          <td>Info Header 1</td>
          <td>Info Header 2</td>
          <td>Info Header 3</td>
          <td>Info Header 4</td>
          <td>Info Header 5</td>
          <td>Info Header 6</td>
          <td>Info Header 7</td>
        </tr>
        <tr>
          <td>Text 1A</td>
          <td>Text 1B</td>
          <td>Text 1C</td>
          <td>Text 1D</td>
          <td>Text 1E</td>
          <td>Text 1F</td>
          <td>Text 1G</td>
        </tr>
        <tr>
          <td>Text 2A</td>
          <td>Text 2B</td>
          <td>Text 2C</td>
          <td>Text 2D</td>
          <td>Text 2E</td>
          <td>Text 2F</td>
          <td>Text 2G</td>
        </tr>
        <tr>
          <td>Text 3A</td>
          <td>Text 3B</td>
          <td>Text 3C</td>
          <td>Text 3D</td>
          <td>Text 3E</td>
          <td>Text 3F</td>
          <td>Text 3G</td>
        </tr>
      </table>
    </div>
    <button id="print">打印</button>
    
    1. 获取jquery.printarea.js的源码,并引入

    github:点击直达源码

    如果使用这个三年前的源码有问题的话,比如打印空白,可以使用下面由其他网友提供的源码,地址见目录‘空白源码’

    1. 调用printArea()方法
    <script>
      $("#print").click(function() {
        $("#gridtable").printArea();
      });
    </script>
    

    printArea简单实现源码,想看就看,不看跳过

    (function($) {
    	
    	var printAreaCount = 0;
    	var removePrintArea = function(id) {
    		$("iframe#" + id).remove();
    	};
    	
    	$.fn.printArea = function() {
    		var ele = $(this);
    		var idPrefix = "printArea_";
    		removePrintArea(idPrefix + printAreaCount);
    		
    		printAreaCount++;
    		var iframeId = idPrefix + printAreaCount;
    		var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
    		iframe = document.createElement('IFRAME');
    		$(iframe).attr({
    			style: iframeStyle,
    			id: iframeId
    		});
    		
    		// 把iframe放到body中
    		document.body.appendChild(iframe);
    		
    		// 获取iframe的document的属性
    		var doc = iframe.contentWindow.document;
    		doc.open(); // 开启
    		
    		// 获取当前窗口的css文件并引入到iframe中
    		$(document).find("link").filter(function() {
    			return $(this).attr("rel").toLowerCase() == "stylesheet";
    		}).each(function() {
    				doc.write('<link type="text/css" rel="stylesheet" href="' +
    					$(this).attr("href") + '" >');
    		});
    		
    		// 展示要打印的内容
    		doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() +
    			'</div>');
    			
    		doc.close(); // 关闭
    		
    		var frameWindow = iframe.contentWindow;
    		frameWindow.close();
    		frameWindow.focus();
    		frameWindow.print();
    	}
    	
    	
    })(jQuery);
    

    空白源码

    (function($) {
    	var counter = 0;
    	var modes = {
    		iframe: "iframe",
    		popup: "popup"
    	};
    	var standards = {
    		strict: "strict",
    		loose: "loose",
    		html5: "html5"
    	};
    	var defaults = {
    		mode: modes.iframe,
    		standard: standards.html5,
    		popHt: 500,
    		popWd: 400,
    		popX: 200,
    		popY: 200,
    		popTitle: '',
    		popClose: false,
    		extraCss: '',
    		extraHead: '',
    		retainAttr: ["id", "class", "style"]
    	};
    
    	var settings = {}; //global settings
    
    	$.fn.printArea = function(options) {
    		$.extend(settings, defaults, options);
    
    		counter++;
    		var idPrefix = "printArea_";
    		$("[id^=" + idPrefix + "]").remove();
    
    		settings.id = idPrefix + counter;
    
    		var $printSource = $(this);
    
    		var PrintAreaWindow = PrintArea.getPrintWindow();
    
    		PrintArea.write(PrintAreaWindow.doc, $printSource);
    
    		setTimeout(function() {
    			PrintArea.print(PrintAreaWindow);
    		}, 1000);
    	};
    
    	var PrintArea = {
    		print: function(PAWindow) {
    			var paWindow = PAWindow.win;
    
    			$(PAWindow.doc).ready(function() {
    				paWindow.focus();
    				paWindow.print();
    
    				if(settings.mode == modes.popup && settings.popClose)
    					setTimeout(function() {
    						paWindow.close();
    					}, 2000);
    			});
    		},
    		write: function(PADocument, $ele) {
    			PADocument.open();
    			PADocument.write(PrintArea.docType() + "<html>" + PrintArea.getHead() + PrintArea.getBody($ele) + "</html>");
    			PADocument.close();
    		},
    		docType: function() {
    			if(settings.mode == modes.iframe) return "";
    
    			if(settings.standard == standards.html5) return "<!DOCTYPE html>";
    
    			var transitional = settings.standard == standards.loose ? " Transitional" : "";
    			var dtd = settings.standard == standards.loose ? "loose" : "strict";
    
    			return '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + transitional + '//EN" "http://www.w3.org/TR/html4/' + dtd + '.dtd">';
    		},
    		getHead: function() {
    			var extraHead = "";
    			var links = "";
    
    			if(settings.extraHead) settings.extraHead.replace(/([^,]+)/g, function(m) {
    				extraHead += m
    			});
    
    			$(document).find("link")
    				.filter(function() { // Requirement: <link> element MUST have rel="stylesheet" to be considered in print document
    					var relAttr = $(this).attr("rel");
    					return($.type(relAttr) === 'undefined') == false && relAttr.toLowerCase() == 'stylesheet';
    				})
    				.filter(function() { // Include if media is undefined, empty, print or all
    					var mediaAttr = $(this).attr("media");
    					return $.type(mediaAttr) === 'undefined' || mediaAttr == "" || mediaAttr.toLowerCase() == 'print' || mediaAttr.toLowerCase() == 'all'
    				})
    				.each(function() {
    					links += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
    				});
    			if(settings.extraCss) settings.extraCss.replace(/([^,\s]+)/g, function(m) {
    				links += '<link type="text/css" rel="stylesheet" href="' + m + '">'
    			});
    
    			return "<head><title>" + settings.popTitle + "</title>" + extraHead + links + "</head>";
    		},
    		getBody: function(elements) {
    			var htm = "";
    			var attrs = settings.retainAttr;
    			elements.each(function() {
    				var ele = PrintArea.getFormData($(this));
    
    				var attributes = ""
    				for(var x = 0; x < attrs.length; x++) {
    					var eleAttr = $(ele).attr(attrs[x]);
    					if(eleAttr) attributes += (attributes.length > 0 ? " " : "") + attrs[x] + "='" + eleAttr + "'";
    				}
    
    				htm += '<div ' + attributes + '>' + $(ele).html() + '</div>';
    			});
    
    			return "<body>" + htm + "</body>";
    		},
    		getFormData: function(ele) {
    			var copy = ele.clone();
    			var copiedInputs = $("input,select,textarea", copy);
    			$("input,select,textarea", ele).each(function(i) {
    				var typeInput = $(this).attr("type");
    				if($.type(typeInput) === 'undefined') typeInput = $(this).is("select") ? "select" : $(this).is("textarea") ? "textarea" : "";
    				var copiedInput = copiedInputs.eq(i);
    
    				if(typeInput == "radio" || typeInput == "checkbox") copiedInput.attr("checked", $(this).is(":checked"));
    				else if(typeInput == "text" || typeInput == "") copiedInput.attr("value", $(this).val());
    				else if(typeInput == "select")
    					$(this).find("option").each(function(i) {
    						if($(this).is(":selected")) $("option", copiedInput).eq(i).attr("selected", true);
    					});
    				else if(typeInput == "textarea") copiedInput.text($(this).val());
    			});
    			return copy;
    		},
    		getPrintWindow: function() {
    			switch(settings.mode) {
    				case modes.iframe:
    					var f = new PrintArea.Iframe();
    					return {
    						win: f.contentWindow || f,
    						doc: f.doc
    					};
    				case modes.popup:
    					var p = new PrintArea.Popup();
    					return {
    						win: p,
    						doc: p.doc
    					};
    			}
    		},
    		Iframe: function() {
    			var frameId = settings.id;
    			var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;right:0px;top:0px;';
    			var iframe;
    
    			try {
    				iframe = document.createElement('iframe');
    				document.body.appendChild(iframe);
    				$(iframe).attr({
    					style: iframeStyle,
    					id: frameId,
    					src: "#" + new Date().getTime()
    				});
    				iframe.doc = null;
    				iframe.doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
    			} catch(e) {
    				throw e + ". iframes may not be supported in this browser.";
    			}
    
    			if(iframe.doc == null) throw "Cannot find document.";
    
    			return iframe;
    		},
    		Popup: function() {
    			var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
    			windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
    			windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=yes";
    
    			var newWin = window.open("", "_blank", windowAttr);
    
    			newWin.doc = newWin.document;
    
    			return newWin;
    		}
    	};
    })(jQuery);
    

    最后,甩一个printArea的demo,copy直接用,注意引入jquery

    <!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" />
    		<title>Document</title>
    		<script src="js/jquery-1.11.3.min.js"></script>
    		<script src="printArea2.js" type="text/javascript" charset="utf-8"></script>
    
    	</head>
    
    	<body>
    <div id="gridtable">
    	<style type="text/css">
    		table.gridtable {
    			font-family: verdana, arial, sans-serif;
    			font-size: 11px;
    			margin: 0 auto;
    			
    			color: #333333;
    			border-color: #666666;
    			border-collapse: collapse;
    		}
    		
    		table.gridtable td {
    			border-width: 1px;
    			padding: 8px;
    			text-align:center;
    			border-style: solid;
    			border-color: #666666;
    			background-color: #ffffff;
    		}
    		table.gridtable tr.first,table.gridtable tr.first td{
    			border-width: 0;
    		}
    		table.gridtable tr.first td.fl{
    			text-align: left;
    			text-align: -moz-left;
    			text-align: -webkit-left;
    		}
    		table.gridtable tr.first td.fr{
    			text-align: right;
    			text-align: -moz-right;
    			text-align: -webkit-right;
    		}
    		table.gridtable td.text-left{
    			text-align: left;
    			padding-left: 30px;
    		}
    		table.gridtable td.gender {
    			width:80px;
    		}
    		
    		table.gridtable td.last {
    			border-width: 0;
    		}
    		
    		table.gridtable td.pd_btm_2px{
    			padding-bottom: 2px;
    		}
    		
    		span.checkBox{
    			position: relative;
    			padding-left: 25px;
    			margin-right: 10px;
    		}
    		span.checkBox:before{
    			content: "";
    	        display: inline-block;
    	        position: absolute;
    	        top:1px;
    	        left: 5px;
    	        width: 11px;
    	        height: 11px;
    	        border:1px solid #ccc;
    		}
    		.timefr{
    			padding-top: 15px;
    			margin-right: 30px;
    			float: right;
    		}
    		.textfl{
    			float: left;
    			display: block;
    			text-align: left;
    		}
    	</style>
    	<table width="90%" height="90%" class="gridtable">
    		<caption><h1>_____市医疗保险特药使用申请表</h1></caption>
    		<tr class="first">
    			<td class="fl" colspan='5'>申请单号:</td>
    			<td class="fr" colspan='2'>申请日期:XXX年XX月XX日</td>
    		</tr>
    		<tr>
    			<td>姓名</td>
    			<td colspan='2'>张三</td>
    			<td>性别</td>
    			<td class="gender">男</td>
    			<td>年龄</td>
    			<td>28</td>
    		</tr>
    		<tr>
    			<td>社会保障卡卡号</td>
    			<td colspan='2'>123456789</td>
    			<td>身份证号</td>
    			<td colspan='3'>412326499216452135</td>
    		</tr>
    		<tr>
    			<td>人员类别</td>
    			<td class="text-left" colspan="6">
    				<span class="checkBox">职工医保</span>
    				<span class="checkBox">居民医保</span>
    			</td>
    		</tr>
    		<tr>
    			<td>参保属地</td>
    			<td colspan='2'>南京</td>
    			<td>联系电话</td>
    			<td colspan='3'>17312278695</td>
    		</tr>
    		<tr>
    			<td>工作单位</td>
    			<td class="text-left" colspan="6">南京德益康有限公司</td>
    		</tr>
    		<tr>
    			<td>家庭住址</td>
    			<td class="text-left" colspan="6">南京德益康有限公司</td>
    		</tr>
    		<tr>
    			<td>申请使用用品名称</td>
    			<td colspan='2'>沙丹红</td>
    			<td>疾病诊断</td>
    			<td colspan='3'>谈鸟病</td>
    		</tr>
    		<tr>
    			<td>指定医院</td>
    			<td colspan='2'>南京市红十字医院</td>
    			<td>责任医生</td>
    			<td colspan='3'>李建用</td>
    		</tr>
    		<tr>
    			<td>确诊时间</td>
    			<td colspan='2'>2017-12-17</td>
    			<td>身高(cm)</td>
    			<td colspan='3'>178</td>
    		</tr>
    		<tr>
    			<td>体重(kg)</td>
    			<td colspan='2'>60</td>
    			<td>BSA(m^2)</td>
    			<td colspan='3'>1.78</td>
    		</tr>
    		<tr>
    			<td>提供附件名称</td>
    			<td class="text-left" colspan="6">
    				<span class="checkBox">CT报告</span>
    				<span class="checkBox">血常规报告</span>
    				<span class="checkBox">基因检测</span>
    			</td>
    		</tr>
    		<tr rowspan="2">
    			<td class="pd_btm_2px" colspan="7">
    				<span class="textfl">申请人签字(患者本人):</span><br>
    				<span class="timefr"> &nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
    			</td>
    		</tr>
    		<tr rowspan="2">
    			<td class="pd_btm_2px" colspan="7">
                    <span class="textfl">申请人签字(患者本人):</span><br>
                    <div style="clear:both;"></div>
                    <span class="textfl">协助药房盖章:</span><br>
    				<span class="timefr">&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
    			</td>
    		</tr>
    		<tr rowspan="3">
    			<td class="last" colspan="7">
    				<span class="textfl">注:1、本表一式两份,协助药房、参保患者各持一份。</span><br>
    				<div style="clear:both;"></div>
    				<span class="textfl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、需提供的材料:社会保障卡、患者近期一寸免冠彩照、门诊特定项目(门诊大病)证、相关医疗文书(基因检测(必要时)、病理诊断、影像报告、门诊病历、出院小结)等材料。</span><br>
    				<div style="clear:both;"></div>
    				<span class="textfl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、本表私自涂改或复印无效。</span>
    			</td>
    		</tr>
    		
    	</table>
    
    </div>
    
    			<button id="print">打印</button>
    
    			<script>
    				$("#print").click(function() {
    					$("#gridtable").printArea();
    				});
    			</script>
    
    	</body>
    
    </html>
    

    最最后在贴一个比较好看的表格,不负责解决中文乱码

    	<div id="printArea">
    	<style type="text/css">
    		table {
    			border-collapse: collapse;
    			margin: 0 auto;
    			text-align: center;
    		}
    		
    		table td,
    		table th {
    			border: 1px solid #cad9ea;
    			color: #666;
    			height: 30px;
    		}
    		
    		table thead th {
    			background-color: #CCE8EB;
    			width: 100px;
    		}
    		
    		table tr:nth-child(odd) {
    			background: #fff;
    		}
    		
    		table tr:nth-child(even) {
    			background: #F5FAFA;
    		}
    	</style>
    	<table width="90%" class="table">
    		<caption>
    			<h2>  
                    车间能源消耗比例</h2>
    		</caption>
    		<thead>
    			<tr>
    				<th>车间</th>
    				<th>产量</th>
    				<th>电量</th>
    				<th>单耗</th>
    			</tr>
    		</thead>
    		<tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr>
    		<tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr>
    		<tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr>
    		<tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr><tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr>
    		<tr>
    			<td>109</td>
    			<td>13</td>
    			<td>1.34</td>
    			<td>213</td>
    		</tr>
    	</table>
    </div>
    
    展开全文
  • jsp怎么获取每个表格中指定的某一个单元格的值。并给每个表单元赋值。 表格是循环打印显示的。放在for循环下的
  • 使用js实现指定div内容打印功能

    万次阅读 2018-05-02 09:56:57
    实际的开发过程,浏览器本身自带的打印操作默认打印整个可视界面,但是往往不能满足实际项目需要,打印页面指定内容的功能OA系统更加常见。网络上有很多的方法实现,本人结合自身实际体会,绝大多数的方法...

    最近正在开发OA系统,涉及到了页面打印的相关操作。在实际的开发过程中,浏览器本身自带的打印操作默认打印整个可视界面,但是往往不能满足实际项目需要,打印页面指定内容的功能在OA系统中更加常见。网络上有很多的方法实现,本人结合自身实际体会,绝大多数的方法进行归纳。

    本文使用的例子是3个4X3表格,分别写在,1号:<div>内,2号:由<div>载入页面内,3号:由iframe引入页面内,如图:


    方法一:将table放入生成新页面中

    function doPrint(){
            var head_str = "<html><head><title></title></head><body>"; //先生成头部
            var foot_str = "</body></html>"; //生成尾部
            var older = document.body.innerHTML;
            var new_str = document.getElementById('目标ID').innerHTML; //获取指定打印区域
            var old_str = document.body.innerHTML; //获得原本页面的代码
            document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
            window.print(); //打印刚才新建的网页
            document.body.innerHTML = older; //将网页还原
            return false;
    }

    此方法思想是把目标放在一个新的页面中,这样进行打印的话,虽然打印的是整个页面,但是页面这只有目标元素,所以近似看做只打印了目标元素。结果1号和2号可正常打印(以打印预览为准),3号无效果(无论ID取iframe的id还是iframe所引入页面中的id),截图如下:


    要注意的是,此方法相当于把页面替换再换回的过程,原页面发生过一次改变,当页面结构比较复杂,例如使用标签页或者存在动态数据显示等情况时,打印后的页面存在被破坏失去部分功能的可能性。


    方法二:页面中创建标记打印
    function doPrint() { 
        html_str = window.document.body.innerHTML; 
        start_str = "<!--startprint-->"; 
        end_str = "<!--endprint-->"; 
        new_html = html_str.substr(html_str.indexOf(start_str)+17); 
        new_html = html_str.substring(0,new_html.indexOf(end_str));  //截取标记之间的代码段
        window.document.body.innerHTML = new_html; 
        window.print(); 
    }
    此方法的思想与方法一相同,差别仅在于选取目标元素的方式不同。但是结果是一样的(图见方法一,不再另附)。代码中并没有
    使页面还原的函数,所以上述代码执行之后,页面会被破坏。


    方法三:将无用代码隐藏后打印
    function doPrint() { 
        $('目标ID').css('display','none');
        window.print();
    }
    此方法针对div和iframe都可以实现,如果不还原页面,同样在打印后页面会发生变化。如果元素ID选取的是iframe所引用的页面内div,测试了一下,不可。


    方法四:CSS控制是否打印
    <style type="text/css" media=print>  
        .noprint{display : none }  
    </style>
    对于不打印的元素,设置class为noinput,需要打印的可以忽略。此方法与上一方法类似,都是控制display的属性,但是优点在于此方法不会破坏页面,这是很多方法不具备的。和以上的其他方法一样,此方法打印的元素不会自适应“纸张大小”。同时,对于iframe引用的页面,在内部设置class存在失效的可能性。


    方法五:页面创建新iframe存放后打印
    function doPrint(){
        var obj = document.getElementById('目标ID');
        var new_iframe = document.createElement('IFRAME');
        var doc = null;
        new_iframe.setAttribute('style', 'width:0px;height:0px;position:absolute;left:-2000px;top:-2000px;');
        new_iframe.setAttribute('align', 'center');
        document.body.appendChild(new_iframe);
        doc = new_iframe.contentWindow.document;
        doc.write('<div style="width:100%;height:auto;min-width:1100px;margin:0px auto;"align="center">'+obj.innerHTML+'</div>');
        doc.close();
        new_iframe.contentWindow.focus();
        new_iframe.contentWindow.print();
        //document.body.removeChild(iframe);
    }
    此方法思想是将目标元素放置到一个新建的iframe中(通过设置iframe的css属性使其脱离页面可视范围之外),在调用iframe的打印方法(先聚焦focus()),打印其载入的页面(目标元素),近似实现打印指定页面的的效果。此方法针对div可行,但是对iframe引入的内容试了两次,未果(针对iframe载入页面的打印,完全可以根据这个方法的思想,将页面焦点定在iframe框架本身,在调用打印函数)。


    方法六:针对iframe打开新页面打印
    function doPrint(){
          var new_html = document.getElementById("目标ID").src;
          var new_page = window.open(new_html);
          new_page.print();
    }
    此方法思想是把iframe所以用的页面已新网页形式打开,在调用页面打印。好处是不破坏原网页,但是个人感觉没有太大必要。


    方法七:调用库文件实现封装好的方法打印
    <script type="text/javascript" src="jquery.PrintArea.js"></script>
    function doPrint(){
        $('目标ID').printArea();
    }
    此方法原理与方法六类似,只不过源文件的实现比方法六更加完美,代码更加健壮。此处不再赘述。


    总结:
        实现打印页面指定div的方法并不只有以上几种,但以上几种比较常见,不保证能涵盖所有情况。以上的方法统一的弊端就是,目标元素打印之后的样式是默认布局,例如,如果想要将当前页面65%宽的table以100%形式打印,需要在打印之前,对目标元素的样式表进行处理。此外,以上代码目前只在Chrome浏览器中测试通过,时间原因,firefox和IE并未来得及测试。还有,IE打印插件WebBrowser,也是在IE中常用的解决方法,大家可以尝试。
    以上所述可能会存在纰漏,如有对大家造成困扰,
    望见谅

    展开全文
  • """获取表格中指定的列的数据,并保存到指定的文件""" #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from bs4 import BeautifulSoup import time a_url = 'http://31f.cn/' ...
    """获取表格中指定的列的数据,并保存到指定的文件中"""
    
    #!/usr/bin/env python 
    # -*- coding:utf-8 -*-
    import requests
    from bs4 import BeautifulSoup
    import time
    
    a_url = 'http://31f.cn/'
    html = requests.get(a_url)
    pagesource = html.text
    soup = BeautifulSoup(pagesource, 'html.parser')
    
    trs = soup.find('table', class_='table table-striped').find_all('tr')  # 查找列表中所有行
    time_count = time.strftime('%Y%m%d%H%M%S', time.localtime(time.time()))  # 获取当前时间,并格式化时间
    file_path = "/Users/自己的路径/agent_id_" + str(
        time_count) + ".txt"  # 存储的路径,文件名以当前时间来命名
    f = open(file_path, "w")  # 没有就创建一个proxy_agent_id.txt的文件,赋予写权限
    # 将查找出来的ip和端口号保存到文件中
    for x in range(1, len(trs)):
        tr = trs[x]  # 取出第x行数据
        tds = tr.findAll("td")  # 在第x行中查找每列的值
        td_temp = tds[1].contents[0] + "\t" + tds[2].contents[0] + "\n"  # 取出第2列和第3列的值
        f.write(td_temp)  # 将取出来的值存放到file_path对应文件中
        print('打印IP地址和端口号:\n', td_temp)
    f.close()  # 关闭文件

     

    展开全文
  • 直接整页打印,但如果需要打印网页定义的部分内容,则可使用如下的方法: 1、页面的代码头部处加入JavaScript: function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr=""; //开始打印...

    方法一:

    正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法:
    1、在页面的代码头部处加入JavaScript:
    <script language=javascript>
    function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
    eprnstr="<!--endprint-->"; //结束打印标识字符串
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
    window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
    window.print(); //调用浏览器的打印功能打印指定区域

    window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
    }

    2、在页面正文处加上<!--startprint-->与<!--endprint-->标识。
    也就是在需要用户打印保存的正文所对应的html处附加上。同时,如果采用小偷程序获得远程数据并需打印,可将此等数据置于该定义标签之内即可。
    3、截取内容部分已完成,现在加个“打印”的链接:
    <a href="javascript:;"  onClick="doPrint()">打印</a>
    <script language=javascript>
    function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr="<!--startprint-->";
    eprnstr="<!--endprint-->";
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML=prnhtml;
    window.print();
    }

    要打印的内容在<!--startprint-->startprint与endprint之间的区域<!--endprint-->里。
    <a href="javascript:;" onClick="doPrint()">打印</a>  

     

    -----------------------------------------------------------------------------------------=====----

    方法二:

    function PrintPage1()
    {  
    var newstr = document.getElementById("printPage").innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = newstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;

    }


    方法三:

    使用jquery.PrintArea.js 插件

    用法:

    $("div#printmain").printArea();  


    但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页

    <div style="page-break-after: always;"></div> 

    有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。


    PrintArea部分源码:

    1. var modes = { iframe : "iframe", popup : "popup" };  
    2. var defaults = { mode     : modes.iframe,  
    3.                     popHt    : 800,  
    4.                     popWd    : 800,  
    5.                     popX     : 200,  
    6.                     popY     : 200,  
    7.                     popTitle : '',  
    8.                     popClose : false ,  
    9.                     twoDiv   : '', //自已扩展的属性,为满足变态需求  
    10.                     pageTitle: ''};//自已扩展的属性,为满足变态需求  



    可以看出插件中定义的属性格式为JSON,下面介绍部分属性

    modes定义了两个属性,指定popup时会打开新窗口,可以视为打印预览页面,默认为iframe。

    @popClose | [boolean] | (false),true  打印完成后是否开闭预览页面,默认为false(不关闭)。

    1. $("div#printmain").printArea({mode:"popup",popClose:true});  


    这样就可以指定DIV打印了。

    下面说一下我新增两个属性的用途
    twoDiv:
            需要打印的第二个DIV ,当然会是第二页,这个页面比较长,需要自动分页,并且表格中每行都不一样,有些行跨了多行,这里打印出来,一行可能会打印在两张纸上。

    pageTitle:
            第二个DIV分成多页里,每一页的表头都需要一样,这个参数就是公用表头。

    这两个参数都对应着页面中的DIV,如:

    1. <div id="pageTitle" style="display: none;">  


    页面定义好后,我们看看插件中是如何处理我们的页面的。

    1. writeDoc.open();  
    2. writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码   
    3. writeDoc.close();  
    4.   
    5. printWindow.focus();  
    6. printWindow.print();  



    下面是生成html的代码

    1. html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";  


    插件中都定义了相义的方法,我没有做任何修改,这里我就不粘贴了。


    下面是我的思路:
           需在将一个DIV中的内容分成多页,且一行不跨多页,我们就得在生成html 代码上下功夫了。

           首先找出DIV中的所有行,当公共表头加上这些行后高度达到一页,就需要分页了,这里就有可以一页中最后一行刚好跨了多页,将这一行保存下来,放到下一页。

           每一页生成完成后都需要在HTML标签后面加上CSS分页标记,这样就打印机就会乖乖的分页。
         
           说明一下,生成的预览页面一页就是一个HTML页面,它有对应的表头与DTD信息。

           有人可能明明预览只有4页,而打印出来总会多一页,这时你需要检验一下你生成的页面中分页标记是不是在HTML标签之前。
           分面标记一定要在HTML标签之后,这样可解决打印多打一页问题。

    PS:  
           下面我会传上我修改过后的JS插件,由于我项目周期的原因,代码中很多部分都是写死了,只是为了解决本次打印的问题。所在代码中写得很乱,希望大家将究着看
          
           同事也希望哪位能够再优化一下,使之通用。

    转自:http://www.cnblogs.com/mizzle/p/3889512.html

    展开全文
  • 可以GitHub上下载打印插件,但是自己写更简单,所以我就自己写了 本例为打印网页上的一个表格 window.print()打印的是整个网页的HTML内容,不包括CSS @media print{ ... }可以设置打印时样式 正文 网页效果: ...
  • jquery 打印页面指定内容

    千次阅读 2012-09-27 15:56:43
    打印" onclick="myPrint('tj_div')" />   2、jquery: function myPrint(obj) { var newWindow = window.open("print.htm", "_blank"); //print.htm为同目录下的htm空页面 var div = document....
  • Beautiful Soup是一个可以从HTML或XML文件提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时甚至数天的工作时间. 安装:$...
  • java实现控制台打印表格

    千次阅读 2020-11-12 17:20:30
    背景 ...实现该功能的过程,对我来说最麻烦的是要控制台输出表格,难点在于表格列宽相等以及表格内容要居中对齐。 效果 最终实现效果如下: 核心代码分享 分享此内容的目的有二: 为要实现
  • 将Excel中内容按条插入Word表格

    千次阅读 2017-12-13 17:56:11
    查看Excel数据打开Word并点击邮件选择收件人-使用现有列表-找到ExcelWord插入表格-再点击插入合并域-选择对应列点击完成并合并-编辑单个文件-打印全部每页都会生成对应表格
  • 开发自有许多心得,但最想跟大家谈的是报表实现每页打印指定记录数这个问题。   方法一   VFP的报表生成器,编制报表,用调整报表页头带和页脚带高度的方法来控制每页要打印的记录数据,这是一...
  • 工作经常需要将产品明细表转换成标签,贴送货单上,或者将学生成绩转换成标签打印出来发送给学生。 例如下图有若干产品的送货信息,要求按图2的模板批量打印。 图1 送货信息 图2 标签模板 要实现此类需求,...
  • 如题,用window.print能够成功打印指定div,但是div里面的input内容在点击打印按钮之后就没有了 打印出来也只是打印出格式 没有input里面输入的内容 怎么获取到div及里面所有输入的内容呢? 以下是我的方法代码: ...
  • C# PrintDocument 打印表格

    千次阅读 2017-05-05 09:11:24
    1.封装好的辅助类: using System; using System.Data; using System.Drawing; using System.Drawing.Printing; using System.Windows.Forms; namespace RC.Finance ... /// 打印打印预览 /// public
  • java打印Excel表格

    千次阅读 2018-03-26 11:14:46
    这里用servlet简单介绍一下java打印报表 1.无合并行/列 package weaver.xhyy.servlet; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; ...
  • 要复制excel表的内容: 分别第15、16、17、18、19列 第二张的excel表格: 代码部分: import xlrd from datetime import datetime from xlutils.copy import copy excel_file = '2018材料出库单列表(含...
  • vue项目-打印页面部分区域的内容

    万次阅读 热门讨论 2017-11-17 09:49:53
    项目的开发遇到了点击打印,需要打印页面部分的表格,实现方式如下 首先将需要打印内容包裹起来:例如 当点击打印的时候,执行下面的方法: // 打印 printContent(e){ let subOutputRankPrint =...
  • HTML打印指定区域

    千次阅读 2019-06-12 02:03:51
    通常浏览网页的时候,网页上总是出现一些和内容无关的内容在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以有需要打印的网页上稍微设置一下打印页是很有必要的。。。 首先head里面加入...
  • js如何打印表格

    千次阅读 2017-06-26 15:26:26
    4行3列        document.write("")  for(var i=1;i  {  document.write("")  for(var j=1;j  {  document.write("")  }  document.write("")  } ... document.write("")
  • EasyUIdatagrid(数据表格)点击特定单元格获取该单元格所在行的其它属性的数据值并控制台打印输出 效果展示 点击datagrid数据表格中每一个项目的项目名称,然后控制台打印输出“项目名称、项目编号、截止日期...
  • Java Console/控制台 打印表格

    万次阅读 2018-01-07 19:24:58
    功能:控制台打印表格,支持字段动态长度,左对齐,右对齐,居中,设置最大列长,设置列间隔符,设置最多打印多少行。类下载地址:http://download.csdn.net/download/j506825719/10211082简单使用方法:new的时候,...
  • java打印表格到打印机

    千次阅读 2011-12-12 00:07:27
    这里我我有部分功能是要将一张表格通过java调用打印机打印出来,这里要用到java的Printable接口 Printable 接口由当前页面 painter 的 print 方法实现,该方法由打印系统调用,以呈现页面。构建 Pageable 时,...
  • 当我们制作Excel表格时候,为了省麻烦直接里面制作多个表格,但又不知道如何才能分页将这些表格打印出来,那么遇到这种情况我们应该如何操作呢?是重新制作多个Excel表格,再一个个的打印,还是有什么好的方法...
  • layui打印表格自定义函数

    千次阅读 2019-10-02 08:07:22
    h = window.open("打印窗口", "_blank" ); h.document.write(f + $(v).prop("outerHTML" )); h.document.close(); h.print(); h.close(); } 效果如下   转载于:...
  • 利用“WPS表格”软件我们可以更方便更快捷地制作工作需要的表格在表格中写入相关数据,本文为大家介绍下怎么制作表格指定表格的大小。本例以宽2cm高1cm为例制作表格,其他需求参考此例即可。 描述:WPS表格大小...
  • Js实现简单的打印表格

    千次阅读 2018-12-13 18:58:13
    效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;...打印表格&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
  • js打印div指定区域内容并保留css样式

    千次阅读 2017-08-14 20:15:07
    ... ...debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,...具体的原因我不是十分清楚,看了一下jqprint的源码,jqprint支持手动指定打印时的样式,默认情况下为当前页面的样式表。
  • 使用javascript打印和预览表格

    千次阅读 2008-06-02 11:37:00
    var hkey_root,hkey_path,hkey_keyhkey_root="HKEY_CURRENT_USER"hkey_path="//Software//Microsoft//Internet Explorer//PageSetup//"//设置网页打印的页眉页脚为空function pagesetup_null(){try{var RegWsh = new...
  • 2.内容、图片、表格跨页断裂,封边; 3.table并行、并列双边、重边; 4.自动计算页码(总数及每一页),样式、位置、形式完全个性化; 5.页眉页脚,去除浏览默认,自定义内容、样式、位置; 6.保持页脚页面底部,...
  • Sheets("评级审批表").PrintOut Copies:=ol '打印指定工作表 ActiveWorkbook.Save '保存当前工作簙 ActiveWorkbook.Close '关闭当前工作簙 Next i '打开下一个工作簙 Else MsgBox "没有找到任何工作簿文件" '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,494
精华内容 26,597
关键字:

如何在表格中指定内容打印