Question

我的print 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的另一种方法吗？

Answer 1

您的代码中似乎有一个有问题的句子是：

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

可能未定义base_url或导出路径中bootstrap.css不可用。您应该在删除代码中的特定行后尝试运行代码，如果它有效，那么您应该检查该行中的代码。

Answer 2

我终于解决了这个问题。它更简单。我已经使用 CHROME BROWSER 在 WINDOWS PLATFORM 上尝试了这个代码，它就像魅力一样。

$(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);
    });
});

打印特定div在打印预览上显示空白页

2 个答案: