【问题标题】:Print contents of a form onclick of a button [duplicate]单击按钮打印表单内容[重复]
【发布时间】:2017-04-05 12:42:55
【问题描述】:

我想在单击按钮时打印表单的内容。

我的浏览页面 这里我绑定了所有的字段数据。

<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>&nbsp;&nbsp;
                                                        <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>

但是当我点击打印按钮时,打印窗口会打开,但它显示所有字段内容都是空白的。

【问题讨论】:

    标签: javascript codeigniter


    【解决方案1】:
    <!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>
    

    【讨论】:

    • 我使用上面的脚本但是打印窗口没有打开。
    • 我更新了我的答案,它对我有用,试试这个:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-26
    • 2011-11-10
    • 2022-01-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-29
    相关资源
    最近更新 更多