2017-05-02 4 views
1

現在、結果を印刷する必要があるプロジェクトに取り組んでいます。 ユーザーは、ホームページに直接見つかったボタンを使用して、またはいくつかのブートストラップモードで見つかったボタンを使用して、それを印刷することができます。 問題は、ユーザーがモーダルでボタンから印刷しようとしたときに、フォントサイズがホームページで見つかったボタンを使用する場合と異なる場合と、別のCSSを印刷に使用している場合です。 問題の原因は何かわかっていますか? おかげJavascriptを使用して印刷するときのフォントサイズが異なる

が、これはこれは私が

<div class="print-area" id="print-area"> 
      <div class="print-out-po" id="print-out-po"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="row"> 
          <div class="col-md-12"> 
           <h4>PURCHASE ORDER</h4> 
          </div> 
         </div> 

         <br> 

         <div class="row"> 
          <div class="col-md-12"> 
           <h5>Kode Desain</h5> 
          </div> 
          <div class="col-md-12"> 
           <strong><h3 id="item-id-po"></h3></strong> 
          </div> 
         </div> 

         <br> 


         <div class="row"> 
          <div class="col-md-12"> 
           <h5>Ukuran</h5> 
          </div> 
          <div class="col-md-12"> 
           <strong><h3 id="item-size-po"></h3></strong> 
          </div> 
         </div> 

         <br> 


         <div class="row"> 
          <div class="col-md-12"> 
           <h5>Kode Lemari</h5> 
          </div> 
          <div class="col-md-12"> 
           <strong><h3 id="item-cabinet-code-po"></h3></strong> 
          </div> 
         </div> 

         <br> 


         <div class="row"> 
          <div class="col-md-12"> 
           <h5>Harga</h5> 
          </div> 
          <div class="col-md-12"> 
           <strong><h3 id="item-price-po"></h3></strong> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

This is the photo when print using button on the homepage

を印刷する必要が

function BuyItem(item_id) { 
    $.ajax({ 
     beforeSend: function() { 
      $('#show-detail-modal').modal('hide'); 

      swal({ 
       title: 'Processing', 
       text: '', 
       showConfirmButton: false, 
      }); 

      CleanPOArea(); 
     }, 
     url: 'shop/GetItem', 
     type: 'POST', 
     async: true, 
     data: { 
      'item_id': item_id, 
     }, 
     success: function (json) { 
      var item = $.parseJSON(json); 

      if (item.item_stock <= 0) { 
       swal('Maaf, Stok Barang Telah Habis, Silakan Kembali Lagi'); 
      }else { 
       $('#item-id-po').html(item.item_id); 
       $('#item-size-po').html(item.item_size); 
       $('#item-cabinet-code-po').html(item.item_cabinet_code); 
       $('#item-price-po').html("Rp " + parseInt(item.item_price).toLocaleString('id')); 
      } 
     }, 
     complete: function() { 
      swal.close(); 

      window.print(); 
     } 
    }); 
} 

HTML部分を印刷するのに使用jsのあるCSSコード

@media screen { 
    #print-area { 
     display: none; 
    } 
} 

@media print { 
    body * { 
     visibility: hidden; 
    } 

    #print-area { 
     display: inline; 
    } 

    #print-out-po, #print-out-po * { 
     visibility: visible; 
    } 

    #print-out-po { 
     position: absolute; 
     left: 0.5cm; 
     top: 0.5cm; 

    } 

    /*#print-out-po:last-child { 
     page-break-after: auto; 
    }*/ 

    #print-out-po h1, h2, h3, h4, h5, h6 { 
     font-style: normal; 
     font-family: sans-serif; 
    } 

    #print-out-po h1, .h1 { 
     font-size: 48pt; 
    } 

    #print-out-po h2, .h2 { 
     font-size: 42pt; 
    } 

    #print-out-po h3, .h3 { 
     font-size: 36pt; 
    } 

    #print-out-po h4, .h4 { 
     font-size: 30pt; 
     font-weight: normal; 
    } 

    #print-out-po h5, .h5 { 
     font-size: 24pt; 
     font-weight: normal; 
    } 

    #print-out-po h6, .h6 { 
     font-size: 18pt; 
    } 

    #print-out-po p { 
     margin: 0 0 10px; 
    } 
} 

です

This is when print using button on some modal

フォントとページの合計の違いに注目してください。

+0

どのように印刷しますか? – madalinivascu

+0

これはPHPの問題ではありません。 PHPはコンテンツを生成するだけです。デベロッパーコンソールを使用して要素を検査し、何が違うかを確認します。 CSSまたはエレメントのデフォルトスタイルにすることができます。 – chris85

+0

@ madalinivascu現在、いくつかのhidden divにデータを入力してから、window.print()を呼び出して印刷します。 – MaverickWells

答えて

0

あなたのCSSを適用したい場合は、以下のようなあなたのCSSファイルをロードする必要があります。詳細は

var win = window.open('','printwindow'); 
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" href="http://localhost:8080/fin/pcd/css/printlib.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css" /></head><body>'); 
    win.document.write($("#print_area").html()); 
    win.document.write('<div class="testPrint"></div><script>;</script></body></html>'); 
    win.print(); 

Designing for print with cssリンク、完全な説明と例を参照してください。

関連する問題