JavaScript打印功能问题

Question

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. 当我单击ÖnIzleme（跨度/按钮）时，我回来了，我无法在div上使用JavaScript函数，如Draggable Resize方法。 Do anyone can help me ? 有人可以帮助我吗？ Önizleme Button job is print When i back to from print screen i cant use my JavaScript function Like Draggable and resize. ÖnizlemeButton作业正在打印当我从打印屏幕返回时，我无法使用我的JavaScript函数，如Draggable和调整大小。 What is the my fault do anyone can help me? 我的错是谁能帮助我？

<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
    height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39;  text-align:center;float:left;margin-right:20px;}

.shadow(@shadow){
  -webkit-box-shadow:@shadow;
  -mox-box-shadow:@shadow;
  box-shadow:@shadow;
}


.label-danger{

    margin-left:10px;
    margin-top:10px;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    //console.log(ev.target);
}

function drop(ev) {

    ev.stopPropagation()
    var EklenecekDiv=ev.target;
    var data = ev.dataTransfer.getData("text");
    //console.log(ev.target);
    console.log($(ev.target).parent());


    var divim=ev.target;

        var c = divim.children;
        console.log(c.lenght);
            /*if(c[2]==null)
            {
                 EklenecekDiv=$($(ev.target).parent());
                 EklenecekDiv.append()
                var label1=document.getElementById(data);

                var MyLabelAdd1=document.createElement("div");
                MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
                $(MyLabelAdd1).attr("name","KolonAdi");
                EklenecekDiv.append(MyLabelAdd1);
                divim.remove();
                label1.remove();
                return;
                console.log(EklenecekDiv);
            }




        if(c[3]!=null)
        {
            c[3].remove();

        }*/




    var label=document.getElementById(data);

    var MyLabelAdd=document.createElement("div");

    MyLabelAdd.appendChild(document.createTextNode($(label).html()));
        $(MyLabelAdd).attr("name","KolonAdi");
        if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
        if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }

    EklenecekDiv.appendChild(MyLabelAdd);
    label.remove();
}
function tiklandi()
{

    alert("Okey");
}
function Click(e){
    if(SecilenItem==null)
    {
        alert("Lütfen Alan Seçiniz");
        return;
    }

    var item=SecilenItem;
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    KolonDiv.style.marginLeft=Bosluk+"px";
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);





};

function CiktiGetir(e){
    var KolonlarinChildren=document.getElementsByClassName("divKolon");
    var printContents = document.getElementById("Kolonlar");
     var originalContents = document.body.innerHTML;

    printContents=printContents.innerHTML;



     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;


}
function TabloAlanTiklandi (e){



     SecilenItem=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
    //e.remove();
}

function FontLi(e)
{
    YaziFont=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
}

function StilDegistir(e)
{

}

function EkAlanClick(e){
    if($("#EkAlan").val()==null)
    {
        alert("Lütfen Alan Giriniz");
        return;
    }
    var h1=document.createElement("h1");
    var item=$("#EkAlan").val();
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);


$("#EkAlan").val("");



}

function BoslukEkle(e)
{
    if($("#Aralik").val().lenght==0)
    {
        alert("Aralik Degeri Giriniz");
        return;
    }
    Bosluk=$("#Aralik").val();
    alert(Bosluk);
    $("#Aralik").val("");
}

function BoyutEkle(e)
{
    if($("#YaziBoyutu").val().lenght==0)
    {
        alert("Boyut Degeri Giriniz");
        return;
    }
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");   

}


</script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Calendar</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->

  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <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>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">



  <!-- Left side column. contains the logo and sidebar -->


  <!-- Content Wrapper. Contains page content -->

    <!-- Content Header (Page header) -->


    <!-- Main content -->
   <div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
   <div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
    <span class="caret"></span></button>

    <ul id="Secenekler" class="dropdown-menu">
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
    </ul>
  </div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>

    <div class="col-xs-1"></div>
      <input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">

      <label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>

      <div class="col-xs-4" ></div>
    <label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
    <label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">

<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1"  onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
    <span class="caret"></span></button>

    <ul id="Fontlar" class="dropdown-menu">
      <li><a onClick="FontLi(this)" href="#">Georgia</a></li>
      <li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
      <li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
      <li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial</a></li>
      <li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
      <li><a onClick="FontLi(this)" href="#">Impact</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
      <li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
      <li><a onClick="FontLi(this)" href="#">Verdana</a></li>
      <li><a onClick="FontLi(this)" href="#">Courier New</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
    </ul>
  </div>

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>

</div>


<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>






    <!-- /.content -->

  <!-- /.content-wrapper -->



  <!-- Control Sidebar -->

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>

<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->

</body>
</html>

Answer 1

It's not an optimal solution but can you try replacing CiktiGetir function with this: 这不是最佳解决方案，但是您可以尝试用CiktiGetir方法替换CiktiGetir函数：

function CiktiGetir(e){
    var htmlElement = document.querySelector("html");
    var printContents = document.getElementById("Kolonlar");

    // Make body invisible, append new element to HTML
    document.body.style.display = "none";
    htmlElement.appendChild(printContents);

    window.print();

    // Make body visible again, remove the added element
    document.body.style.display = "initial";
    htmlElement.removeChild(printContents);
}

Replacing HTML content breaks the JS events and dynamic contents. 替换HTML内容会破坏JS事件和动态内容。

Answer 2

You are replacing the body HTML 您正在替换正文HTML

document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;

So you will need to reatach the events. 因此，您将需要安排活动。

Try the "on" jquery method. 尝试“ on” jquery方法。 Something like 就像是

$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

Answer 3

My code was just an example. 我的代码只是一个例子。 You will have to adapt it to your code. 您将不得不使其适应您的代码。

You need to reatach the events after replace body content. 替换正文内容后，您需要重新安排事件。

If, you dont want to to this, you can refresh the entire page. 如果您不想这样做，则可以刷新整个页面。

function CiktiGetir(e){
    var KolonlarinChildren=document.getElementsByClassName("divKolon");
     var printContents = document.getElementById("Kolonlar");
     printContents=printContents.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     location.reload();
}

JavaScript打印功能问题

问题描述

3 个解决方案

解决方案1
1 2016-08-12 18:10:52

解决方案2
0 2016-08-12 17:58:29

解决方案3
0 2016-08-12 18:20:04

JavaScript打印功能问题

问题描述

3 个解决方案

解决方案1 1 2016-08-12 18:10:52

解决方案2 0 2016-08-12 17:58:29

解决方案3 0 2016-08-12 18:20:04

解决方案1
1 2016-08-12 18:10:52

解决方案2
0 2016-08-12 17:58:29

解决方案3
0 2016-08-12 18:20:04