在移动视图中使用jQuery添加打印按钮。但是没有用

时间:2017-12-04 13:02:33

标签: jquery mobile printing

我尝试在网站上打印内容。但是没有用。 screenshot



function myFunction(){
  window.print();
}

<p>Click the button to print the current page.</p>
<button onclick="myFunction()">Print this page</button>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

试用此代码

&#13;
&#13;
$(function () {
  $("#btnPrint").click(function () {
    var contents = $("#dvContents").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();
    //Create a new HTML document.
    frameDoc.document.write('<html><head><title>DIV Contents</title>');
    frameDoc.document.write('</head><body>');
    //Append the external CSS file.
    frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
    //Append the DIV contents.
    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;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvContents">
  <div class="clear"></div>
  <hr />
  <div class="contents">
    <span class="label">Hello,
      <br />
      This is <span class="name">Karan Mehta</span>.<br />
      Hoping that you are enjoying This!
    </span>
  </div>
</div>
<br />
<input type="button" id="btnPrint" value="Print" />
&#13;
&#13;
&#13;