Question

这里div包含一个文本框和glyphicon，文本框值将在页面加载时动态加载。现在我需要打印Div及其样式属性和文本框内容。

下面的HTML代码：

＆＃13;

$(document).ready(function(){
  document.getElementById("text1").value = "Johnny Bravo";
});

$(function () {
  $("#btnPrint").click(function () {
    var contents = $("#one").html();

    var frame1 = $('<iframe />');
    frame1[0].name = "frame1";
    frame1.css({ "position": "absolute", "top": "-1000000px" });
    $("body").append(frame1);
    var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
    frameDoc.document.open();

    frameDoc.document.write('<html><head><title> CHECKLIST </title>');
    frameDoc.document.write('</head><body>');

    frameDoc.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />');

    var source = 'bootstrap.min.js';
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', source);

    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
      window.frames["frame1"].focus();
      window.frames["frame1"].print();
      frame1.remove();
    }, 500);
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type="button" class="btn btn-default" style="float: right; margin-right: 20px; margin-top: 10px;"  id="btnPrint" value="Print" /> 

<div class="col-lg-12" id="one">
  <div class="row">
    <div class="col-lg-1">

    </div>
    <div class="col-lg-9" >
      <input type="text" class="form-control" id="text1">
    </div>
    <div class="col-lg-2">

      <button type="button" id="menu-toggle"class="btn btn-default">
        <i class=" glyphicon glyphicon-thumbs-up"></i>
      </button>
    </div> 
  </div>
</div>

＆＃13;

打印Div的样式和内容

0 个答案: