3
Kolej için Kimlik Kartı oluşturmak istedim ve html'de (modal) istediğim gibi oluşturdum, ancak baskı düğmesine bastığımda arka planı yazdırıyor ve hiçbir içerik gösterilmiyor. Modal günü Kimlik Kartı: Baskı SayfadaPrint Screen Sayı
Kimlik Kartı:
Kodu:
@print stilleri çağrılır<style>
@media print
{
div {
content:url(dist/img/bahtiid.png);
width: 323.527559055px;
height: 204.018897638px;
border: 1px solid black;
}
.img {
content:url(dist/img/user2.jpg);
width: 90px;
height: 100px;
}
.no-print, .no-print *
{
display: none !important;
}
.print, .print *
{
display: block;
}
}
@page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-print">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body print">
<div style="width:323.527559055px; height:204.018897638px; border: 1px solid black; background-image: url(dist/img/bahtiid.png);background-size: 323.527559055px 204.018897638px; z-index:-1;">
<div class="col-md-12 print">
<br /><br /><br />
<div class="col-md-9 print" style="font-size:12px; margin-left:-10px">
<b> Name : </b> Swapnil J Khadke <br />
<b> Address : </b> 29, sadguru nagar, MIDC Area, Jalgaon. <br />
<b> Class : </b> ENGG
<b> Year : </b> 2016-17 <br />
<b> DOB : </b> 16-11-2016
<b> Blood Group : </b> O+ <br />
<b> Email : </b> [email protected] <br />
<b> Mobile : </b> 9999999999 <br />
</div>
<div class="col-md-3 pull-right" ><img class="img" src="dist/img/user2.jpg" style="width:90px; height:100px; margin-left: -40px; margin-top: -2px;"></div>
</div>
</div>
</div>
<div class="modal-footer no-print">
<button type="button" class="btn btn-default" onclick="myFunction()" >Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Lütfen sorunu bir [fiddle] (https://jsfiddle.net/) içinde yeniden üretebilir misiniz? ... – Lal
Bunun dışında bir keman oluşturmaya çalıştım, ancak test etmek oldukça zor görünüyor. işlevselliği codepen üzerinden yazdırma ... Son cevabımı, sorununuza uygun olmadığı için sildim. Ancak, z-endeksi: -1 ile ne yapılacağını sorabilir miyim? Çünkü bu arka planın arkasında bir şeyler bırakabilir ... –
@AaronLavers: Aslında bu arka planı metnin arkasına almaya çalışıyordum, böylece metin önden görünebiliyordu, ama işe yaramazdı. – swap