js 打印form表单填写的数据

最新推荐文章于 2023-09-14 17:54:04 发布

丨奋斗小蜗牛丨

最新推荐文章于 2023-09-14 17:54:04 发布

阅读量4.9k

点赞数 3

分类专栏： js经验技术经验类文章标签： javascript

原文链接：https://blog.csdn.net/dream_broken/article/details/52639653

版权

技术同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

经验类

8 篇文章 0 订阅

订阅专栏

js经验

6 篇文章 0 订阅

订阅专栏

项目中有个打印功能，要求用户填写数据后，点击打印，则把表单的内容打印出来，发现调用window.print()进行打印时，填写的数据没有获取到，原因就是$("#form").html()时，没包含有填写的数据，为了解决这问题，应该html()之前，把所有填写的数据都val('XX')先。在这记录下。

比如例子刚开始如下

<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<title>XXXXXX</title>	
 
</head>
 
<body>
<center>
不用打印:aaaaaaaaaaaaa<br/><br/>
<form id="form">
   XXXXXX资料<br/><br/>
用户名:<input type="text" /><br/>
性别:<input type="radio"  name="sex" value='1' checked />男<input type="radio"  name="sex" value='1'  />女
 
</form>
<br/><br/>
按钮不打印<br/><br/>
<input type="button" οnclick="doPrint()" value="打印" />
</center>
<br/>
</body>
<script type="text/javascript">
function doPrint(){
   //备份body
   var body = window.document.body.innerHTML;
   //备份title
   var title = document.getElementsByTagName('title')[0].innerHTML;
   //获取要打印的内容
   var form = $("#form").html();
   
   window.document.body.innerHTML = form;
   document.getElementsByTagName('title')[0].innerHTML = '';
	
   //调用window的打印功能
   window.print();
   
   //恢复原内容
   window.document.body.innerHTML = body;
   document.getElementsByTagName('title')[0].innerHTML = title;
}
</script>
</html>

数据没了，打印后或取消打印，回到原页面，数据也是没了。为了解决这问题，要绑定数据

<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<title>XXXXXX</title>	
 
</head>
 
<body>
<center>
不用打印:aaaaaaaaaaaaa<br/><br/>
<form id="form">
   XXXXXX资料<br/><br/>
用户名:<input type="text" /><br/>
性别:<input type="radio"  name="sex" value='1' checked />男<input type="radio"  name="sex" value='1'  />女
 
</form>
<br/><br/>
按钮不打印<br/><br/>
<input type="button" οnclick="doPrint()" value="打印" />
</center>
<br/>
</body>
<script type="text/javascript">
function doPrint(){
    //绑定数据
	bindData()
 
   //备份body
   var body = window.document.body.innerHTML;
   //备份title
   var title = document.getElementsByTagName('title')[0].innerHTML;
   //获取要打印的内容
   var form = $("#form").html();
   
   window.document.body.innerHTML = form;
   document.getElementsByTagName('title')[0].innerHTML = '';
	
   //调用window的打印功能
   window.print();
   
   //恢复原内容
   window.document.body.innerHTML = body;
   document.getElementsByTagName('title')[0].innerHTML = title;
}
//将表单中手动填写的数据进行绑定，便于html()的时候获取到
function bindData(){
	//搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下, 这里忽略button
	$("input,select option").each(function(){
		$(this).attr('value',$(this).val());
	});
	
	//搞定 type=checkbox,type=radio 选中状态
	$("input[type='checkbox'],input[type='radio']").each(function(){
		if($(this).attr('checked'))
			$(this).attr('checked',true);
		else
			$(this).removeAttr('checked');
	});
	
	//搞定select选中状态
	$("select option").each(function(){
		if($(this).attr('selected'))
			$(this).attr('selected',true);
		else
			$(this).removeAttr('selected');
	});
	
	//搞定 textarea
	$("textarea").each(function(){
		$(this).html($(this).val());
	});
	
}
</script>
</html>