2017-10-07 130 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