打印一个表单的内容点击一个按钮
问题描述：
我想打印一个表单的内容按钮的一个按钮。打印一个表单的内容点击一个按钮
我的看法页面 这里我绑定所有的现场数据。
<html>
<head>
<link rel="stylesheet" href="plugins/select2/select2.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div class="content-wrapper">
<section class="content-header">
<h1>
Create Visitors Pass
</h1>
<ol class="breadcrumb">
<li><a href="<?php echo site_url(); ?>/admin"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
<div class="row">
<div class="col-md-10">
<div class="box box-info" id="print-area-1">
<div class="box-header with-border">
<h3 class="box-title">Fill up Form</h3>
</div>
<form class="form-horizontal" action="" method="" enctype="multipart/form-data">
<div class="box-body" id="dvContents">
<div class="form-group">
<div class="col-sm-3 col-md-offset-3"><img src="<?php echo base_url(); ?>assets/images/blank.png" ><div class="clearfix"></div><br>
<button type="button" class="btn btn-info"><i class="fa fa-camera fa-fw"></i>Capture</button>
</div>
<div class="col-md-3 col-md-offset-1">
<img src="<?php echo base_url(); ?>assets/images/user.png" class="thumbnail" >
<h3>Visitors Photo</h3>
</div>
</div>
<?php foreach ($h as $rows) { ?>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">
Visitors Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" value="<?php echo $rows['visitor_name'] ?>" name="visitor" placeholder="Visitors Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Department to go </label>
<div class="col-sm-3">
<select class="form-control select2"name="dptgo" style="width: 100%;">
<option selected="selected"><?php echo $rows['emp_dept'] ?></option>
</select>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Whom to Meet</label>
<div class="col-sm-4">
<select class="form-control select2" name="wtomeet" style="width: 100%;">
<option selected="selected"><?php echo $rows['emp_name'] ?></option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">
Name of the Company</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="cmpname" value="<?php echo $rows['company_name'] ?>" id="inputEmail3" placeholder="Visitors Company">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Associate Person </label>
<div class="col-sm-3">
<select class="form-control select2" name="actper" style="width: 100%;">
<option><?php echo $rows['associate_person'] ?></option>
</select>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Visitors Desgn.</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="visdes" value="<?php echo $rows['visitor_design'] ?>" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Purpose to Meet</label>
<div class="col-sm-5">
<div class="checkbox icheck">
<label>
<input name="meet" class="minimal" <?=$rows['purpose_to_meet']=="official" ? "checked" : ""?> type="radio"> Official
</label>
<label>
<input name="meet" class="minimal" <?=$rows['purpose_to_meet']=="personal" ? "checked" : ""?> type="radio"> Personal
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Company Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="cmpaddrs" value="<?php echo $rows['company_address'] ?>" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Visitors ID Proof No.</label>
<div class="col-sm-5">
<input type="text" class="form-control" value="<?php echo $rows['visitor_id_proff'] ?>" name="idno" id="inputEmail3" placeholder="No.">
</div>
<label for="inputPassword3" class="col-sm-1 control-label">Sex </label>
<div class="col-sm-3">
<div class="checkbox icheck">
<label>
<input name="sex" class="minimal" <?=$rows['sex']=="male" ? "checked" : ""?> type="radio"> Male
</label>
<label>
<input name="sex" class="minimal" <?=$rows['sex']=="female" ? "checked" : ""?> type="radio"> Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Mobile No. </label>
<div class="col-sm-3">
<input type="text" class="form-control" name="mbno" value="<?php echo $rows['phone'] ?>" id="inputEmail3" placeholder="Phone No.">
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Email ID</label>
<div class="col-sm-4">
<input type="email" class="form-control" value="<?php echo $rows['email'] ?>" name="email" id="inputEmail3" placeholder="Email">
</div>
</div>
<?php } ?>
</div>
<div class="box-footer">
<button type="submit" onclick="PrintDiv();" class="btn btn-primary pull-right">Print</button>
</div>
</form>
</div>
</div>
</div></section>
</div>
</div>
<script src="plugins/select2/select2.full.min.js"></script>
<script src="plugins/iCheck/icheck.min.js"></script>
<script>
$(function() {
$(".select2").select2();
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
</script>
</body>
</html>
这是我的脚本
<script type="text/javascript">
function PrintDiv() {
var divContents = document.getElementById("dvContents").innerHTML;
var printWindow = window.open('', '', 'height=200,width=400');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
</script>
但是当我点击打印按钮打印窗口将打开，但它显示的所有字段内容都是空白。
答
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Print this page" onClick="window.print()">
<div id="print-content">
<form>
<input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}
</script>
</body>
</html>
我使用上面的脚本，但打印窗口未打开。 – dipti
我更新我的答案，它适用于我，试试这:) – Nobita