Yalnızca <div id = “printarea”> </div> yazdırılsın mı?

444

Belirtilen div'i nasıl yazdırabilirim (sayfadaki diğer tüm içeriği el ile devre dışı bırakmadan)?

Yeni bir önizleme iletişim kutusundan kaçınmak istiyorum, bu nedenle bu içerikle yeni bir pencere oluşturmak yararlı değildir.

Sayfa birkaç tablo içeriyor, bunlardan biri yazdırmak istediğim div'ı içeriyor - tablo, web için görsel stillerle biçimlendirilmiş, baskıda gösterilmemelidir.

— noesgard
kaynak

1

stackoverflow.com/questions/2255291/… bu bağlantı mükemmel çalışıyor

— Jinna Balu

793

İşte sadece CSS kullanarak çalıştığım doğrulanmış genel bir çözüm .

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Alternatif yaklaşımlar o kadar iyi değil. Kullanımı displayzordur, çünkü herhangi bir eleman varsa display:noneonun hiçbir torunu da gösterilmez. Kullanmak için sayfanızın yapısını değiştirmeniz gerekir.

Kullanılması visibilityEğer torunları için görünürlüğü açabilirsiniz beri iyi çalışmalar. Görünmez öğeler yine de düzeni etkiler, bu section-to-printyüzden düzgün yazdırmak için sol üste hareket ederim .

— Bennett McElwee
kaynak

21

Bu açık ara en hızlı ve en temiz yoldur, bu cevabın neden en fazla oyu alamadığını merak ediyorum.

— Dany Khalife

34

Bu çözümle dikkat edilmesi gereken bir sorun, bazı durumlarda binlerce boş sayfa yazdırabilmenizdir. Benim durumumda bunu bazı ek ekran kullanarak çözebildim: seçilen öğeler için hiçbir stil yok, ancak belki de daha genel bir çözüm, yükseklikleri, taşmayı zorlayan bir kombinasyonla elde edilebilir: tüm div'ler veya bir şey için hiçbiri ve mutlak konumlandırma.

— Malcolm MacLeod

5

Bu harika bir başlangıç ama onunla iki sıkıntı yaşadım: biri için öğenin ebeveynlerinden herhangi birinin kendi göreli / mutlak konumlandırmasını oluşturması durumunda, position:fixedbunun yerine kullanmazsam içerik hala dengelenecektir . Bununla birlikte, Chrome ve Safari, özellikle ilk sayfadan sonra içeriği kısaltır. Benim son geçici çözüm hedefini hem belirlemekti Yani ve tüm ebeveynler içinoverflow:visible; position:absolute !important; top:0;left:0

— natevw

1

@ dudeNumber4 #section-to-printbölümün kendisiyle eşleşir; #section-to-print *bölümün her bir alt öğesiyle eşleşir. Bu kural sadece bölümü ve tüm içeriğini görünür kılar.

— Bennett McElwee

3

Bir JavaScript çözümü deneyebilirsiniz, ancak kullanıcı tarayıcınızın Yazdır komutunu kullanırsa bu işe yaramaz.

— Bennett McElwee

243

Minimum kod ile daha iyi bir çözüm var.

Yazdırılabilir parçanızı şöyle bir kimliğe sahip bir div içine yerleştirin:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Sonra (yukarıda gösterildiği gibi) bir onclick gibi bir olay ekleyin ve yukarıda yaptığım gibi div kimliğini iletin.

Şimdi gerçekten basit bir javascript oluşturalım:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Bunun ne kadar basit olduğuna dikkat edin? Pop-up yok, yeni pencere yok, çılgın stil yok, jquery gibi JS kütüphaneleri yok. Gerçekten karmaşık çözümlerle ilgili sorun (cevap karmaşık değil ve bahsettiğim şey değil), ASLA tüm tarayıcılarda ASLA tercüme edilmeyeceği gerçeğidir! Stilleri farklılaştırmak istiyorsanız, bir stil sayfası bağlantısına medya niteliğini ekleyerek işaretli cevapta gösterildiği gibi yapın (media = "print").

Kabartmak yok, hafif, sadece çalışıyor.

— Kevin Florida
kaynak

@Kevin bu formu için deneyin ama boş formu (veri olmadan) yazdırın ve göndermeden önce yazdırmak için dolu bir form gerekir

— Arif

98

@asprin uyarısı! Bu karışıklık ücretsiz kod değildir. Silme ve sonra tüm vücudu yeniden oluşturmak için innerHTML kullanmak basit sayfalar için iyidir, ancak daha gelişmiş özelleştirmeler (menüler, slayt gösterileri, vb.) Diğer komut dosyaları tarafından eklenen bazı dinamik davranışları silebilir.

— Christophe

17

Bu çözüm, yazdırılabilir alandaki öğelerin üst öğelerin stillerine ve / veya konumuna bağlı olduğu karmaşık bir sayfada işe yaramayacaktır. Yazdırılabilir div'ı çıkarırsanız, tüm ebeveynler artık eksik olduğu için tamamen farklı görünebilir.

— Andrei Volgin

1

Baskı önizleme penceresini kapatır ve ardından bir jQuery yapmaya çalışırsanız ne yazık ki Chrome'da iyi çalışmaz .click. Bu bir utanç, çünkü kod çok hafif.

— rybo111

3

@BorisGappov benim açımdan kanıtlamak için tek bir tıklama olayı ile çok basit bir örnek: jsfiddle.net/dc7voLzt Tekrar söyleyeceğim: Bu karışıklıksız kod değil! Sorun baskının kendisinde değil, orijinal sayfayı geri yüklemekle ilgili!

— Christophe

121

Bütün cevaplar şu ana kadar oldukça kusurlu olan - bunlar ya ekleyerek içerir class="noprint"yukarı her şeyi ya irade bulaşmak displayiçinde #printable.

En iyi çözüm yazdırılamaz şeyler etrafında bir sarıcı oluşturmak olacağını düşünüyorum:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

Tabii ki, HTML'nizde biraz hareket etmeyi içerdiği için bu mükemmel değil ...

— Greg
kaynak

Ben haklısın düşünüyorum, ama nasıl stil kaldırmak için şu mümkünse (div çevreleyen tablonun stil öldürüyorsunuz - Ben masayı yazdırabilirsiniz ve oldukça kolay içeriğin geri kalanını dışlamak

— noesgard

Gerekli içeriği ve CSS'yi yukarıdaki gibi almak için Javascript kullanıyorum

— noesgard

9

Anlamsal HTML kullanmayı tercih ederim. Baskı biçimlendirmesi ideal olarak CSS tarafından ele alınmalıdır. Bunun nasıl yapılacağı ile ilgili cevabımı görün: stackoverflow.com/questions/468881/…

— Bennett McElwee

Bennett ile hemfikir, görüntü yerine görünürlük kullanmak çok daha temiz bir çözüm

— guigouz

Sorucunun ihtiyaçlarına daha uygun olacağını düşündüğüm bu iplik üzerinde gerçekten basit bir çözüm yaptım. Bir baskı stil sayfasına dayanmaz, web sitenizin her yerinde geri dönüştürülebilir ve inanılmaz derecede hafiftir.

— Kevin Florida

108

JQuery ile bu kadar basit:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

— romaninsh
kaynak

3

Bu oldukça havalı, Chrome'da engellenmiş bir açılır pencere olarak görünüyor.

— Rafi Jacoby

8

hile, fare tıklaması gibi kullanıcı tarafından oluşturulan olayda çağırmaktır. ilk satırdan sonra da ekleyebilirsiniz: if (! w) alert ('Lütfen açılır pencereleri etkinleştir');

— romaninsh

1

Herkes bu IE11 üzerinde çalışıyor var? Sadece bir pencere açar ve hemen kapatır. Yine de Chrome, FF ve safari'de çalışır.

— greatwitenorth

3

Bu ile yazdırırken css kaybettim, css korumak için herhangi bir yolu var mı?

— Moxet Khan

2

@MoxetKhan, bu yazının

— lakesare

22

Bir yazdırma stil sayfası kullanabilir ve yazdırılmasını istediğiniz içeriği düzenlemek için CSS kullanabilir misiniz? Daha fazla işaretçi için bu makaleyi okuyun .

— Paul Dixon
kaynak

Baskı stil sayfası var - diğer tüm içeriğe stil kuralı koymaktan kaçınmaya çalışıyorum ...

— noesgard

Ben stil div ile ilgili bir tablo var, söz konusu div conta, Tablo görüntülemek için ayarlarsanız: yok - hala div görüntüleyebilir miyim?

— noesgard

Bence evet ve kuralı artırmak için önemli!

— Paul Dixon

tablo görüntülenmezse div 'display: awesome;' olarak ayarlanmış olsa bile önemli değildir. Ebeveyn gizlenir ve çocuklar da gizlidir. Bu, tabloya ihtiyacınız olan bir durum mu yoksa sadece sayfa düzeni için mi?

— roborourke

"Boom, kafadan vuruş!" tablo düzenleri ile. = |

— ANeves

19

Bu iyi çalışıyor:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Bunun yalnızca "görünürlük" ile çalıştığını unutmayın. "display" bunu yapmayacak. FF3'te test edilmiştir.

— Christian Maioli M.
kaynak

15

Bu cevapların bir bütününü gerçekten sevmedim. Bir sınıfınız varsa (printableArea deyin) ve bunu vücudunuzun hemen bir çocuğu olarak varsa, baskı CSS'nizde böyle bir şey yapabilirsiniz:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Başka bir yerde printableArea arayanlar için, printableArea ailesinin gösterildiğinden emin olmanız gerekir:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Görünürlüğü kullanmak, çok fazla boşluk sorununa ve boş sayfaya neden olabilir. Bunun nedeni, görünürlüğün elemanlar alanını koruduğu, sadece ekranın kaldırdığı ve diğer elemanların alanını kaplamasına izin verdiği yerde onu gizli kılmasıdır.

Bu çözümün işe yaramasının nedeni, tüm unsurları, sadece vücudun hemen çocuklarını tutmamanız ve gizlemenizdir. Display css ile aşağıdaki diğer çözümler, printableArea içeriğinin içindeki her şeyi etkileyen tüm öğeleri gizler.

Ben kullanıcı tıklar ve standart tarayıcı yazdırma düğmelerinin aynı etkisi olmaz bir yazdırma düğmesi olması gerektiği için javascript önermek olmaz. Bunu gerçekten yapmanız gerekiyorsa, yapacağım şey vücudun html'sini saklamak, tüm istenmeyen öğeleri kaldırmak, yazdırmak, sonra html'yi geri eklemek. Ancak yukarıda belirtildiği gibi, yukarıdaki gibi bir CSS seçeneği kullanabilirsiniz ve bunu önlemek.

NOT: Satır içi stilleri kullanarak yazdırılan CSS'ye hangi CSS'yi ekleyebilirsiniz:

<style type="text/css">
@media print {
   //styles here
}
</style>

Ya da genellikle kullandığım gibi bir bağlantı etiketi:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

— fanfavorite
kaynak

Yazdırmak istediğiniz div "vücudun hemen bir çocuğu" değilse ne olur? Bunu vue.js'de yapmaya çalışıyorum .. Ama kabul edilen yanıtı kullanırken çok fazla boş sayfa alıyorum.

— svenema

@venema, istediğiniz herhangi bir CSS'yi kullanabilirsiniz. Bu sadece bir örnekti.

— fanfavorite

hmm, yine de, bunu denediğimde, gerçekten ek boş sayfa yok, ancak printableArea div de gösterilmiyor; Bu kodu kullandığımda sadece 1 boş boş sayfam var.

— svenema

Bunun aslında printableArea div'ın vücut etiketinin doğrudan bir çocuğu olmadığı, bunun doğrudan bir çocuk olduğumda çözümünüzün çalıştığı için olduğunu öğrendim; ancak benim durumumda printableArea öğesini doğrudan bir çocuk yapamıyorum. Bunun etrafında bir yol var mı?

— svenema

@svenema, lütfen yukarıdaki düzenlememe bakın.

— fanfavorite

8

Kimliği yazdırmak istediğiniz öğeyi verin printMe.

Bu komut dosyasını kafa etiketinize ekleyin:

<script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

İşlevi çağır

<a href="javascript:void(processPrint());">Print</a>

— Jason Plank
kaynak

Bu iyi bir iş. Ancak çok karmaşık ve düzgün tarayıcılar (özellikle eski tarayıcılar) düzgün çalışmaz. Aşağıdaki çözümüme bir göz atmanızı öneririm.

— Kevin Florida

6

hm ... yazdırmak için bir stil sayfası türü kullanın ... örn:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }

— Andreas Niedermair
kaynak

Belge DIV tabanlı değilse veya #yourdiv'inizde başka DIV'ler de varsa bu çalışmaz.

— Gumbo

#yourdiv * {display: ...} bunu sayfanın üstüne yerleştirirseniz ve güncel bir tarayıcıya sahipseniz,

— div

"#yourdiv * {display: ...}" - düzeni bozmadan ... ne olmalı?

— Greg

Bu, satır içi öğeleri blok öğeleri olarak da görüntüler. Ama “#yourdiv, #yourdiv div {display: block}” bunu yapacak.

— Gumbo

@dittodhole - bir dakika düşünün. #Yourdiv içindeki düzeni bozmayacak ne koyabilirsiniz?

— Greg

6

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

— Dilip Kr Singh
kaynak

6

güzel görünüyorsun ama baskıdan sonra tüm javascript bağlarını ve diğerlerini kaybediyorsun

— Julien

1

Css olmadan yazdırıyor.

— Moxet Han

6

1. Adım: Kafa etiketinizin içine aşağıdaki javascript'i yazın

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Adım 2: Bir onclick olayıyla PrintMe ('DivID') işlevini çağırın.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

— Hardik Thaker
kaynak

İşte bu o! Modal ve Galeriler için kullandım. Kapandıktan sonra Javascript hatası yok. Özellikle u bir sayfadan daha uzun modals kullandığınızda gerçekten yararlı. Güzel sarar. Mağazaya yazdırmak isteyenler için mükemmeldir.

— TheWeeezel

2

CSS 3 ile aşağıdakileri kullanabilirsiniz:

body *:not(#printarea) {
    display: none;
}

— Bamya
kaynak

Korkarım ki kullanamıyorum ... (yanlışsa beni düzeltin) Üzerinde çalıştığım sayfa asp.net 1.1 / DHTML

— noesgard

Tarayıcıya:: () seçicisinin zaten kullanılabilir olup olmadığına bağlıdır.

— Gumbo

Öyleyse benim teklifim sadece geleceğe bir bakış… Hayır, cidden. Sadece bütünlük uğruna bahsettim. Şu anda uygulanabilir olmadığını biliyorum. Ne yazık ki.

— Gumbo

JQuery ve IE6 - $ ('body *: not (#printarea)') değil. (Display), 'none');

— David Heggie

2

bu, *: not (#printarea) ile eşleştiklerinden #printarea'nın tüm torunlarını gizleyecektir. Temel olarak boş bir kap ile sonuçlanırsınız.

— cytofu

2

İçeriği JavaScript kullanarak aldım ve bunun yerine yazdırabileceğim bir pencere oluşturdum ...

— noesgard
kaynak

Kodu paylaşabilir misiniz,

— css'i

2

Sandro'nun yöntemi harika çalışıyor.

Özellikle sekmeli sayfalarda ve metni genişletmede kullanılmak üzere birden fazla printMe bağlantısına izin vermek için ayarladım.

function processPrint(printMe){ <- burada bir değişken çağırıyor

var printReadyElem = document.getElementById(printMe); <- bir değişken istemek için printMe çevresindeki tırnak işaretleri kaldırıldı

<a href="javascript:void(processPrint('divID'));">Print</a><- yazdırılacak div kimliğinin printMe değişkenini div kimliğine çevirme işlevine geçirilmesi. tek tırnak gerekli

2

printDiv (divId) : Herhangi bir div öğesini herhangi bir sayfaya yazdırmak için genelleştirilmiş bir çözüm.

Benzer bir sorunum vardı, ancak (a) tüm sayfayı yazdırabilmek veya (b) belirli alanlardan herhangi birini basmak istedim. Benim çözümüm, yukarıdakilerin çoğu sayesinde, yazdırılacak herhangi bir div nesnesini belirtmenize izin verir.

Bu çözümün anahtarı, istenen div (ve içeriği) yazdırılacak şekilde yazdırma ortamı stil sayfasına uygun bir kural eklemektir.

İlk olarak, her şeyi bastırmak için gerekli print css dosyasını oluşturun (ancak yazdırmak istediğiniz öğeye izin vermek için belirli bir kural olmadan).

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Yeni sınıf kuralları eklediğimi unutmayın:

noprintarea , bölgenizdeki hem içerik hem de blok içindeki öğelerin yazdırılmasını engellemenizi sağlar.
noprintcontent , bölgenizdeki öğelerin yazdırılmasını engellemenize olanak tanır - içerik gizlenir, ancak ayrılan alan boş bırakılır.
print , basılı sayfada gösterilen ancak ekran sayfasında görünmeyen öğelere sahip olmanızı sağlar. Bunlar normalde ekran stili için "display: none" olur.

Ardından üç JavaScript işlevi ekleyin. İlki yalnızca yazdırma ortamı stil sayfasını açar ve kapatır.

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

İkincisi gerçek işi yapar ve üçüncüsü daha sonra temizler. İkinci (printDiv) yazdırma ortamı stil sayfasını etkinleştirir, ardından istenen div'in yazdırmasına izin vermek için yeni bir kural ekler, baskıyı düzenler ve son temizlik işleminden önce bir gecikme ekler (aksi takdirde stiller aslında baskıdan önce sıfırlanabilir yapılır.)

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

Son işlevler eklenen kuralı siler ve tüm sayfanın yazdırılabilmesi için baskı stilini tekrar devre dışı olarak ayarlar.

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

Yapmanız gereken tek şey, yazdırma işleminin başlangıçta devre dışı bırakılması ve böylece tüm sayfanın yazdırılmasına izin vermek için yükleme işleminize bir satır eklemektir.

<body onLoad='disableSheet(0,true)'>

Ardından belgenizdeki herhangi bir yerden bir div yazdırabilirsiniz. Sadece bir düğmeden veya başka bir şeyden printDiv ("canlı") yayınlayın.

Bu yaklaşım için büyük bir artı, seçilen içeriğin bir sayfadan yazdırılması için genel bir çözüm sağlar. Ayrıca, içeren div de dahil olmak üzere yazdırılan öğeler için mevcut stillerin kullanılmasına izin verir.

NOT: Benim uygulamada, bu ilk stil sayfası olmalıdır. Sayfa sırasını daha sonra yapmanız gerekirse, sayfa referanslarını (0) uygun sayfa numarasına değiştirin.

— DrDave
kaynak

2

@Kevin Florida Aynı sınıfta birden fazla div varsa, bunu şu şekilde kullanabilirsiniz:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

Colorbox iç içerik türünü kullanıyordum

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

— Stefan
kaynak

2

Benim durumumda bir sayfanın içine bir resim yazdırmak zorunda kaldım. Oy kullandığım çözümü kullandığımda 1 boş sayfam ve diğeri resmi gösteriyor. Umarım birine yardım eder.

İşte kullandığım css:

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

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

Benim html:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

— Raphael Monteiro
kaynak

2

Boş boş yüksekliğe uyacak en iyi css:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

— TRI ÂN
kaynak

2

Belirli Div veya herhangi bir Öğeyi Yazdırmanın En İyi Yolu

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

— Mahetab
kaynak

1

Yazdırma için özel bir Stil Sayfası kullanma

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

ardından yazdırmak istemediğiniz her etikete bir sınıf yani "noprint" ekleyin.

CSS kullanımında

.noprint {
  display: none;
}

— Xn0vv3r
kaynak

1

Yalnızca bu div'i yazdırmak istiyorsanız, talimatı kullanmalısınız:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

— Jason Plank
kaynak

1

PrintDiv () işlevi birkaç kez ortaya çıktı, ancak bu durumda tüm bağlayıcı öğelerinizi ve giriş değerlerinizi kaybedersiniz. Bu yüzden benim çözümüm, "body_allin" olarak adlandırılan her şey ve "body_print" olarak adlandırılan birincisinin dışında bir div oluşturmaktır.

Sonra bu işlevi çağırırsınız:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

— pmrotule
kaynak

Bu satır benzersiz bir kimlik istiyorsanız yararlı olabilir: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');

— pmrotule

1

"Printarea" kimliğinden başka her içeriği devre dışı bırakan ayrı bir CSS stili kullanabilirsiniz.

Daha fazla açıklama ve örnekler için CSS Tasarımı: Yazdırmaya Gitme konusuna bakın .

— Kosi2801
kaynak

Yeni konumun bağlantısı güncellendi. Downvote yerine bir yorum güzel olurdu.

— Kosi2801

1

Her bir düğme ile birden fazla görüntü vardı ve her div bir görüntü ile yazdırmak için bir düğmeye tıklamak gerekiyordu. Bu çözüm, tarayıcımda önbelleği devre dışı bıraktıysam ve Chrome'da resim boyutu değişmezse çalışır:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

— aşkı yaşa
kaynak

1

Geçerli sayfayı etkilemeden bir yaklaşım daha var ve yazdırma sırasında css devam ediyor. Burada seçici, hangi içeriği yazdırmamız gerektiğini belirleyen özel div seçici olmalıdır.

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

Burada harici css'in uygulandığını göstermek için biraz zaman aşımı sağlandı.

— Mukesh Kumar Suman
kaynak

CSS'nin yüklenmesi bazen zaman alır, bu yaklaşım yazdırmadan önce sayfayı yeniden yüklemek istediğim şeydir. Teşekkürler

— Arpit Shrivastava

1

Sağlanan çözümlerin çoğunu denedim, hiçbiri mükemmel çalışmadı. CSS veya JavaScript bağlantılarını kaybediyorlar. Ne CSS ne de JavaScript bağlarını kaybetmeyen mükemmel ve kolay bir çözüm buldum.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

JavaScript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

— BibanCS
kaynak

Bu açılış ve Android'de çalışmayan başka bir pencere oluşturma. Yalnızca doğrudan window.print () çalışır.

— Merv

1

Bu partiye çok geç kaldım, ama başka bir yaklaşımla adım atmak istiyorum. PrintElements adında küçük bir JavaScript modülü yazdımBir web sayfasının bölümlerini dinamik olarak yazdırmak için .

Seçilen düğüm öğeleri arasında yineleme yaparak çalışır ve her düğüm için BODY öğesine kadar DOM ağacını yukarı doğru hareket ettirir. Her seviyede, ilk olanı (yazdırılacak düğümün seviyesi) dahil olmak pe-preserve-printüzere, geçerli düğüme bir işaretçi sınıfı ( ) ekler . Ardından pe-no-print, geçerli düğümün tüm kardeşlerine başka bir işaretleyici sınıfı ( ) ekler , ancak yalnızca pe-preserve-printüzerinde sınıf yoksa . Üçüncü bir eylem olarak, korunan ata elemanlarına başka bir sınıf ekler pe-preserve-ancestor.

Ölü basit bir tamamlayıcı salt yazdırma css, ilgili öğeleri gizler ve gösterir. Bu yaklaşımın bazı faydaları, tüm stillerin korunmuş olması, yeni bir pencere açmaması, çok sayıda DOM öğesinin hareket etmesine gerek olmaması ve genellikle orijinal belgenizle invazif olmamasıdır.

Daha fazla ayrıntı için demoya bakın veya ilgili makaleyi okuyun .

— András Szepesházi
kaynak

0

Bunu kullanabilirsiniz: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Veya ile birlikte visibility:visibleve visibility:hiddencss özelliğini kullanın@media print{}

'display: none' tüm iç içe 'display: block'u gizleyecektir. Bu çözüm değil.

— 0xC0DEGURU
kaynak

0

Çözümü buldum.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

— user2573099
kaynak

0

@Kevin Florida cevabına dayanarak, mevcut sayfadaki komut dosyasının üzerine yazma içeriği nedeniyle devre dışı bırakılmasını önlemek için bir yol yaptım. "PrintScreen.php" (veya .html) adlı başka bir dosya kullanıyorum. Yazdırmak istediğiniz her şeyi div "printSource" a sarın. Javascript ile daha önce oluşturduğunuz yeni bir pencereyi açın ("printScreen.php") ve ardından üst pencerenin "printSource" öğesinden içerik alın.

İşte kod.

Ana pencere :

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Bu "printScreen.php" dir - yazdırılacak içeriği alan diğer dosya

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

— QeiNui
kaynak