現在、結果を印刷する必要があるプロジェクトに取り組んでいます。 ユーザーは、ホームページに直接見つかったボタンを使用して、またはいくつかのブートストラップモードで見つかったボタンを使用して、それを印刷することができます。 問題は、ユーザーがモーダルでボタンから印刷しようとしたときに、フォントサイズがホームページで見つかったボタンを使用する場合と異なる場合と、別の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
フォントとページの合計の違いに注目してください。
どのように印刷しますか? – madalinivascu
これはPHPの問題ではありません。 PHPはコンテンツを生成するだけです。デベロッパーコンソールを使用して要素を検査し、何が違うかを確認します。 CSSまたはエレメントのデフォルトスタイルにすることができます。 – chris85
@ madalinivascu現在、いくつかのhidden divにデータを入力してから、window.print()を呼び出して印刷します。 – MaverickWells