2017-10-07 170 views
0

我發現了一個問題,我的打印DIV語法打印特定格給出了打印預覽空白頁

HTML

<button class="btn btn-primary dropdown-toggle" type="button" id="cetak_temuan" data-toggle="dropdown"><i style="color:white" class="fa fa-print"></i> Cetak</button> 
<div class="mod">  
<table width="100%" style="margin-bottom: 20px"> 
     <tr> 
     <td colspan="5" ><h3 align="center">INSPEKTORAT PROVINSI MALUKU</h3> 
     </td> 
    </tr> 
     <tr> 
     <td width="15%">Nama SKPD</td> 
     <td width="2%" align="center">:</td> 
     <td width="50%" id="skpd_table"></td> 
     </tr> 
     <tr> 
      <td>Judul Laporan</td> 
      <td align="center">:</td> 
      <td id="jlaporan_table"></td> 
      <td width="20%">Periode Laporan</td> 
      <td width="2%" align="center">:</td> 
      <td width="40%" id="prlp_table"></td> 
     </tr> 
     <tr> 
      <td>Nomor Laporan</td> 
      <td align="center">:</td> 
      <td id="nolaporan_table"></td> 
      <td width="20%">Periode Tindak Lanjut</td> 
      <td width="2%" align="center">:</td> 
      <td width="40%" id="prtl_table"></td> 
     </tr> 
     <tr> 
      <td colspan="5"><h4 align="center">URAIAN TEMUAN TINDAK LANJUT</h4></td> 
     </tr> 
     </table> 

     <table class="table table-borderless table-striped" > 
      <thead> 
      <tr> 
       <th colspan="2">Kondisi</th> 
       <th colspan="2">Penyebab</th> 
       <th colspan="2">Rekomendasi</th> 
       <th colspan="2">Tindak lanjut</th> 
      </tr> 
      </thead> 
      <tbody id="kondisi_tabel"> 
      </tbody> 
     </table> 
     </div> 

JS

$('#cetak_temuan').on('click', function() { 
    var dfd = $.Deferred(); 
// Add handlers to be called when dfd is resolved 
dfd.done(PrintElem2('.mod'));dfd; 
}); 

    function PrintElem2(elem){ 
    Popup2($(elem).html()); 
} 

function Popup2(data) 
{ 
     var mywindow = window.open('','Print A Page ','height=400,width=600'); 
    mywindow.document.write('<style type="text/css" media="print">@page{size:landscape;}</style><html><head><title>Cetak Lapora</title>'); 
    mywindow.document.write(' <link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.css">'); 
    mywindow.document.write('</head><style type="text/css" > table tr td {font-size:12px;}table > thead > tr >th , table> tbody > tr > td {font-size:10px} #dontprint{display:none} .dontshow{display:display} </style><body>'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 
    //mywindow.print(); 
    mywindow.document.close(); 
    myDelay = setInterval(checkReadyState2,10); 

    function checkReadyState2(){ 
    if(mywindow.document.readyState == "complete") { 
     clearInterval(myDelay); 
     mywindow.focus(); 
     mywindow.print(); 
     mywindow.close(); 
    } 
    } 
    return true; 
} 

每當我試着我的代碼,它只是給我一個打印預覽的空白頁面。我嘗試使用chrome。我嘗試了另一種網絡瀏覽器,如Opera,它的工作方式與我的預期一樣,但是當我關閉已彈出的打印預覽窗口時,該頁面無法單擊或鍵入單詞。我的語法有什麼問題?

或者有人可能會建議我使用javascript打印特定div的另一種方式?

回答

0

我終於解決了這個問題。它更簡單。我已經嘗試過,它的作用就像魅力。

$(function() { 
    $('#cetak_temuan').click(function() { 
     var contents = $(".mod").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('<style type="text/css" media="print">@page{size:landscape;}</style><html><head><title>Cetak Lapora</title>'); 
     frameDoc.document.write('<link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.css">'); 
     frameDoc.document.write('<style type="text/css" > table tr td {font-size:12px;}table > thead > tr >th , table> tbody > tr > td {font-size:10px} #dontprint{display:none} .dontshow{display:display} </style>'); 
     //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); 
    }); 
}); 
0

似乎在代碼中一個有問題的一句話是:

mywindow.document.write(' <link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.css">'); 

可能base_url沒有定義或bootstrap.css不可在得到的路徑。你應該在代碼中移除特定行後嘗試運行你的代碼,如果它有效,那麼你應該檢查該行中的代碼。

+0

但爲什麼當我在Opera上試用這個時,它只是工作? – Gagantous

+0

您使用的是哪個版本的chrome?可能是'base_url()'的兼容性。這就是爲什麼我建議如果你的代碼沒有與'bootstrap'有關的句子,那麼你需要檢查那行代碼。 – MKR

+0

版本61.0.3163.100(官方版本)(64位) – Gagantous