打印特定的 div 在打印预览中给出空白页答案

【问题标题】：Print specific div gives blank page on print preview打印特定的 div 在打印预览中给出空白页
【发布时间】：2017-10-07 13:29:52
【问题描述】：

我的打印 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>

$('#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 的方法吗？

【问题讨论】：

标签： javascript html css printing

【解决方案1】：

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

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

【讨论】：

你在ipad上测试过吗？还是一般的iOS？尝试与此类似的代码时，页面上没有显示任何内容。
如果您有机会在 iOS 上进行测试并提出解决方案，请告诉我 :) 我遇到了最大的麻烦。
我有一个问题已经在这里开始了：stackoverflow.com/questions/49904197/…
@UnitedProDesign 我很想测试一下，但除了 windows 之外我没有其他平台... :'(
你真的应该多样化自己:)哈哈，很公平。

【解决方案2】：

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

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

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

【讨论】：

您使用的是哪个版本的 chrome？也许base_url() 的兼容性。这就是为什么我建议如果你的代码没有与bootstrap 相关的句子，那么你需要检查那行代码。
版本 61.0.3163.100（正式版）（64 位）