Cetak <div id = "printarea"> </div> saja?

444

Bagaimana cara mencetak div yang ditunjukkan (tanpa secara manual menonaktifkan semua konten lain pada halaman)?

Saya ingin menghindari dialog pratinjau baru, jadi membuat jendela baru dengan konten ini tidak berguna.

Halaman ini berisi beberapa tabel, salah satunya berisi div yang ingin saya cetak - tabel ditata dengan gaya visual untuk web, yang tidak boleh ditampilkan dalam bentuk cetak.

javascript  css  printing  dhtml 
— noesgard
sumber
1
stackoverflow.com/questions/2255291/... tautan ini berfungsi sempurna
— Jinna Balu

Jawaban:

792

Ini adalah solusi umum, hanya menggunakan CSS , yang telah saya verifikasi untuk berfungsi.

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

Pendekatan alternatif tidak begitu baik. Penggunaan displayitu rumit karena jika ada elemen yang memiliki display:nonemaka keturunannya tidak akan menampilkan keduanya. Untuk menggunakannya, Anda harus mengubah struktur halaman Anda.

Menggunakan visibilitykarya lebih baik karena Anda dapat mengaktifkan visibilitas untuk keturunan. Elemen yang tidak terlihat masih mempengaruhi tata letak, jadi saya pindah section-to-printke kiri atas sehingga mencetak dengan benar.

— Bennett McElwee
sumber
21
sejauh ini ini adalah cara tercepat dan terbersih, saya bertanya-tanya mengapa jawaban ini tidak mendapatkan suara terbanyak -.-
— Dany Khalife
34
Masalah yang harus diperhatikan dengan solusi ini adalah Anda dapat mencetak ribuan halaman kosong dalam beberapa kasus. Dalam kasus saya, saya dapat menyelesaikan ini dengan menggunakan beberapa tampilan tambahan: tidak ada gaya untuk item yang dipilih tapi mungkin solusi yang lebih umum dapat dicapai dengan beberapa kombinasi ketinggian yang juga memaksa, overflow: tidak ada dan posisi absolut untuk semua divs atau sesuatu.
— Malcolm MacLeod
5
Ini adalah awal yang baik tetapi saya memiliki dua masalah dengan itu: untuk satu jika salah satu dari orang tua elemen menetapkan posisi relatif / absolut sendiri konten akan tetap diimbangi kecuali saya gunakan position:fixedsebagai gantinya. Namun, Chrome dan Safari juga akan memotong konten, terutama setelah halaman pertama. Jadi solusi terakhir saya adalah menetapkan target dan semua orang tuanya untukoverflow:visible; position:absolute !important; top:0;left:0
— natevw
1
@ dudeNumber4 #section-to-printcocok dengan bagian itu sendiri; #section-to-print *cocok dengan masing-masing sub-elemen bagian. Jadi aturan itu hanya membuat bagian dan semua isinya terlihat.
— Bennett McElwee
3
Anda dapat mencoba solusi JavaScript, tetapi itu tidak akan berhasil jika pengguna Anda menggunakan perintah Print pada browser.
— Bennett McElwee
243

Saya punya solusi yang lebih baik dengan kode minimal.

Tempatkan bagian Anda yang dapat dicetak di dalam div dengan id seperti ini:

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

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

Kemudian tambahkan acara seperti onclick (seperti yang ditunjukkan di atas), dan lulus id dari div seperti yang saya lakukan di atas.

Sekarang mari kita buat javascript yang sangat sederhana:

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

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Perhatikan betapa sederhananya ini? Tidak ada sembulan, tidak ada jendela baru, tidak ada gaya gila, tidak ada perpustakaan JS seperti jquery. Masalah dengan solusi yang sangat rumit (jawabannya tidak rumit dan bukan yang saya maksudkan) adalah kenyataan bahwa ia TIDAK akan pernah menerjemahkan di semua browser! Jika Anda ingin membuat gaya berbeda, lakukan seperti yang ditunjukkan dalam jawaban yang dicentang dengan menambahkan atribut media ke tautan stylesheet (media = "print").

Tidak ada bulu, ringan, itu hanya berfungsi.

— Kevin Florida
sumber
@Kevin saya mencoba ini untuk formulir tetapi mencetak formulir kosong (tanpa data) dan saya perlu formulir diisi untuk dicetak sebelum mengirimkan
— Arif
98
@asprin peringatan! Ini bukan kode bebas kekacauan. Menggunakan innerHTML untuk menghapus lalu membuat ulang seluruh tubuh tidak masalah untuk halaman sederhana, tetapi dengan penyesuaian lebih lanjut (menu, tayangan slide, dll.) Itu bisa menghapus beberapa perilaku dinamis yang ditambahkan oleh skrip lain.
— Christophe
17
Solusi ini tidak akan berfungsi di halaman kompleks mana pun di mana elemen-elemen di area yang dapat dicetak bergantung pada gaya dan / atau posisi elemen induk. Jika Anda mengekstrak div yang dapat dicetak, ini mungkin terlihat sangat berbeda karena semua orang tua sekarang hilang.
— Andrei Volgin
1
Sayangnya tidak berfungsi dengan baik di Chrome jika Anda menutup jendela pratinjau cetak lalu mencoba melakukan jQuery .click. Sayang sekali, karena kodenya sangat ringan.
— rybo111
3
@BorisGappov contoh yang sangat sederhana dengan hanya satu klik acara untuk membuktikan maksud saya: jsfiddle.net/dc7voLzt Saya akan mengatakannya lagi: ini bukan kode bebas kekacauan! Masalahnya bukan pada cetakan itu sendiri, ini tentang mengembalikan halaman asli!
— Christophe
121

Semua jawaban sejauh ini cukup cacat - mereka melibatkan penambahan class="noprint"untuk segala sesuatu atau akan berantakan di displaydalam #printable.

Saya pikir solusi terbaik adalah dengan membuat pembungkus di sekitar hal-hal yang tidak dapat dicetak:

<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>

Tentu saja ini tidak sempurna karena melibatkan sedikit perubahan dalam HTML Anda ...

— Greg
sumber
Saya pikir Anda benar, tetapi bagaimana cara saya membunuh styling dari tabel di sekitar div (jika itu mungkin untuk menghapus styling - saya dapat mencetak tabel dan mengecualikan sisa konten dengan mudah
— noesgard
Saya menggunakan Javascript untuk mengambil konten yang dibutuhkan dan CSS seperti di atas
— noesgard
9
Saya lebih suka menggunakan HTML semantik. Format cetak idealnya harus ditangani oleh CSS. Lihat jawaban saya untuk bagaimana melakukan ini: stackoverflow.com/questions/468881/…
— Bennett McElwee
Setuju dengan Bennett, menggunakan visibilitas alih-alih tampilan adalah solusi yang jauh lebih bersih
— guigouz
Saya membuat solusi yang sangat sederhana di bagian bawah utas ini yang saya pikir akan lebih sesuai dengan kebutuhan si penanya. Itu tidak mengandalkan lembar gaya cetak, dapat didaur ulang di seluruh situs web Anda, dan sangat ringan.
— Kevin Florida
108

Dengan jQuery sesederhana ini:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
— romaninsh
sumber
3
Ini sangat keren, meskipun muncul di Chrome sebagai popup yang diblokir.
— Rafi Jacoby
8
triknya adalah menyebutnya pada acara yang dibuat pengguna seperti pada klik mouse. Anda juga dapat menambahkan setelah baris pertama: if (! w) lansiran ('Tolong aktifkan munculan');
— romaninsh
1
Adakah yang punya ini bekerja di IE11? Itu hanya membuka jendela kemudian segera menutupnya. Bekerja di Chrome, FF, dan safari.
— greatwitenorth
3
Saya kehilangan css saat mencetak dengan ini, apakah ada cara untuk mengelola css?
— Moxet Khan
2
@MoxetKhan, posting ini memiliki solusi dengan css vevlo.com/how-to-print-div-content-using-javascript
— lakesare
22

Bisakah Anda menggunakan lembar gaya cetak , dan menggunakan CSS untuk mengatur konten yang ingin Anda cetak? Baca artikel ini untuk petunjuk lebih lanjut.

— Paul Dixon
sumber
Saya punya gaya cetak sheet - mencoba untuk menghindari menempatkan aturan gaya dalam semua konten lainnya ...
— noesgard
Saya memang memiliki meja dengan gaya, containg div tersebut, Jika saya mengatur tabel untuk ditampilkan: tidak ada - apakah saya masih dapat menampilkan div?
— noesgard
Saya kira begitu ya, dan Anda dapat mencoba menandai aturan sebagai! Penting untuk meningkatkannya!
— Paul Dixon
jika tabel tidak ditampilkan, tidak masalah meskipun div diatur ke 'display: awesome;'. Orang tua disembunyikan dan begitu juga anak-anak. Apakah ini situasi di mana Anda memerlukan tabel atau hanya untuk tata letak halaman?
— roborourke
"Boom, headshot!" oleh tata letak meja. = |
— ANeves
19

Ini bekerja dengan baik:

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

Perhatikan bahwa ini hanya berfungsi dengan "visibilitas". "display" tidak akan melakukannya. Diuji dalam FF3.

— Christian Maioli M.
sumber
15

Saya tidak terlalu menyukai jawaban ini secara keseluruhan. Jika Anda memiliki kelas (katakan printableArea) dan memilikinya sebagai anak langsung, maka Anda dapat melakukan sesuatu seperti ini di CSS cetak Anda:

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

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

Bagi mereka yang mencari printableArea di tempat lain, Anda perlu memastikan orang tua printableArea ditampilkan:

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

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

Menggunakan visibilitas dapat menyebabkan banyak masalah spasi dan halaman kosong. Ini karena visibilitas mempertahankan elemen elemen, membuatnya tersembunyi, sedangkan tampilan menghilangkannya dan memungkinkan elemen lain mengambil ruangnya.

Alasan mengapa solusi ini berhasil adalah karena Anda tidak mengambil semua elemen, hanya anak-anak langsung dari tubuh dan menyembunyikannya. Solusi lain di bawah ini dengan display css, sembunyikan semua elemen, yang memengaruhi segalanya di dalam konten printableArea.

Saya tidak akan menyarankan javascript karena Anda harus memiliki tombol cetak yang diklik pengguna dan tombol cetak browser standar tidak akan memiliki efek yang sama. Jika Anda benar-benar perlu melakukan itu, yang akan saya lakukan adalah menyimpan html tubuh, menghapus semua elemen yang tidak diinginkan, mencetak, lalu menambahkan html kembali. Seperti yang disebutkan, saya akan menghindari ini jika Anda bisa dan menggunakan opsi CSS seperti di atas.

CATATAN: Anda dapat menambahkan CSS apa pun ke dalam cetak CSS menggunakan gaya inline:

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

Atau seperti yang biasa saya gunakan adalah tag tautan:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
— fanfavorite
sumber
Bagaimana jika div yang ingin Anda cetak bukan "anak langsung dari tubuh"? Saya mencoba melakukan ini di vue.js .. Tapi saya mendapatkan banyak halaman kosong ketika menggunakan jawaban yang diterima.
— svenema
@venema, Anda dapat menggunakan CSS apa pun yang Anda inginkan. Ini hanya sebuah contoh.
— fanfavorite
hmm, masih, ketika saya mencoba ini, memang tidak ada halaman kosong tambahan, tetapi printableArea div juga tidak muncul; Saya hanya punya 1 halaman kosong kosong ketika saya menggunakan kode ini.
— svenema
Saya menemukan bahwa itu memang karena printableArea div bukan anak langsung dari tag tubuh, ketika saya menjadikannya anak langsung solusi Anda berfungsi; Namun, dalam kasus saya, saya tidak bisa menjadikan printableArea anak langsung. Apakah ada jalan keluarnya?
— svenema
@venema, silakan lihat edit saya di atas.
— fanfavorite
8

  1. Berikan elemen apa pun yang Anda ingin cetak id printMe.

  2. Sertakan skrip ini di tag kepala Anda:

    <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>

  3. Panggil fungsinya

    <a href="javascript:void(processPrint());">Print</a>
— Jason Plank
sumber
Ini pekerjaan yang bagus. Tetapi terlalu rumit dan tidak akan berfungsi dengan baik lintas browser (terutama browser yang lebih tua). Saya sarankan Anda melihat solusi saya di bawah ini.
— Kevin Florida
6

hm ... gunakan jenis stylsheet untuk mencetak ... mis:

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

print.css:

div { display: none; }
#yourdiv { display: block; }
— Andreas Niedermair
sumber
Ini tidak akan berfungsi jika dokumen tidak berbasis DIV atau #domainAnda juga menyertakan DIV lebih lanjut.
— Gumbo
#yourdiv * {display: ...} jika Anda meletakkannya di atas halaman dan memiliki peramban yang mutakhir, Anda dapat bekerja dengan lebih banyak penyeleksi untuk menyembunyikan non divs
— Andreas Niedermair
"#yourdiv * {display: ...}" - apa yang seharusnya ... tanpa melanggar tata letak?
— Greg
Ini akan menampilkan elemen sebaris juga sebagai elemen blok. Tetapi "#domainAnda, #domainAnda {tampilan: blok}" akan melakukannya.
— Gumbo
@dododhole - pikirkan sebentar. Apa yang bisa Anda letakkan di sana yang tidak akan merusak tata letak di dalam #yourdiv?
— 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
sumber
6
terlihat bagus tetapi Anda kehilangan semua ikatan javascript dan lainnya setelah cetak
— Julien
1
Ini mencetak tanpa css.
— Moxet Khan
6

Langkah 1: Tuliskan javascript berikut di dalam tag kepala Anda

<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>

Langkah 2: Panggil fungsi PrintMe ('DivID') dengan acara onclick.

<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
sumber
Ini adalah salah satunya! Digunakan untuk Modal dan Gallerys. Tidak ada kesalahan Javascript setelah penutupan. Sangat membantu terutama ketika Anda menggunakan modals yang lebih dari satu halaman. Membungkusnya dengan baik. Sempurna untuk orang yang ingin mencetak untuk menyimpan.
— TheWeeezel
2

Dengan CSS 3 Anda dapat menggunakan yang berikut:

body *:not(#printarea) {
    display: none;
}
— Gumbo
sumber
Saya tidak bisa menggunakan itu ... (koreksi saya jika salah) halaman yang saya kerjakan adalah asp.net 1.1 / DHTML
— noesgard
Tergantung pada browser apakah pemilih: not () sudah tersedia atau tidak.
— Gumbo
Kalau begitu proposal saya hanya melihat ke masa depan ... Tidak, serius. Saya hanya menyebutkannya demi kelengkapan. Saya tahu bahwa itu tidak praktis saat ini. Sayangnya.
— Gumbo
Anda dapat menggunakan jQuery dan pemilih ini yang (saya pikir) akan bekerja di IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
— David Heggie
2
ini akan menyembunyikan semua keturunan #printarea, karena mereka cocok dengan *: not (#printarea). Jadi pada dasarnya Anda berakhir dengan wadah kosong.
— cytofu
2

Saya mengambil konten menggunakan JavaScript dan membuat jendela yang bisa saya cetak sebagai pengganti ...

— noesgard
sumber
Bisakah Anda membagikan kodenya, memiliki masalah mengadopsi css
— Moxet Khan
2

Metode Sandro bekerja sangat baik.

Saya men-tweak untuk memungkinkan beberapa tautan printMe, khususnya untuk digunakan dalam halaman tab dan memperluas teks.

function processPrint(printMe){ <- memanggil variabel di sini

var printReadyElem = document.getElementById(printMe); <- menghapus tanda kutip di sekitar printMe untuk meminta variabel

<a href="javascript:void(processPrint('divID'));">Print</a><- meneruskan ID div yang akan dicetak ke fungsi untuk mengubah variabel printMe menjadi ID div. diperlukan satu kutipan

2

printDiv (divId) : Solusi umum untuk mencetak div pada halaman apa pun.

Saya memiliki masalah serupa tetapi saya ingin (a) dapat mencetak seluruh halaman, atau (b) mencetak salah satu dari beberapa area spesifik. Solusi saya, terima kasih banyak dari hal di atas, memungkinkan Anda menentukan objek div yang akan dicetak.

Kunci untuk solusi ini adalah menambahkan aturan yang sesuai pada lembar gaya media cetak sehingga div yang diminta (dan isinya) akan dicetak.

Pertama, buat css cetak yang diperlukan untuk menekan semuanya (tetapi tanpa aturan khusus untuk mengizinkan elemen yang ingin Anda cetak). 

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

Perhatikan bahwa saya telah menambahkan aturan kelas baru:

  • noprintarea memungkinkan Anda untuk menekan pencetakan elemen di dalam konten Anda dan blok.
  • noprintcontent memungkinkan Anda untuk menekan pencetakan elemen dalam div Anda konten ditekan tetapi dan area yang dialokasikan dibiarkan kosong.
  • cetak memungkinkan Anda untuk memiliki item yang muncul dalam versi cetak tetapi tidak pada halaman layar. Ini biasanya akan memiliki "tampilan: tidak ada" untuk gaya layar.

Kemudian masukkan tiga fungsi JavaScript. Yang pertama hanya menghidupkan dan mematikan lembar gaya media cetak.

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

Yang kedua melakukan pekerjaan nyata dan yang ketiga membersihkan sesudahnya. Yang kedua (printDiv) mengaktifkan lembar gaya media cetak, kemudian menambahkan aturan baru untuk memungkinkan div yang diinginkan untuk mencetak, mengeluarkan cetakan, dan kemudian menambahkan penundaan sebelum rumah tangga akhir (jika tidak, gaya dapat diatur ulang sebelum cetak sebenarnya selesai.) 

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

Fungsi akhir menghapus aturan yang ditambahkan dan mengatur gaya cetak lagi untuk dinonaktifkan sehingga seluruh halaman dapat dicetak. 

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

Satu-satunya hal yang harus dilakukan adalah menambahkan satu baris ke pemrosesan onload Anda sehingga gaya cetak pada awalnya dinonaktifkan sehingga memungkinkan pencetakan seluruh halaman. 

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

Kemudian, dari mana saja di dokumen Anda, Anda dapat mencetak div. Keluarkan printDiv ("thedivid") dari sebuah tombol atau apa pun.

Nilai tambah besar untuk pendekatan ini memberikan solusi umum untuk mencetak konten yang dipilih dari dalam halaman. Ini juga memungkinkan penggunaan gaya yang ada untuk elemen yang dicetak - termasuk div yang mengandung.

CATATAN: Dalam implementasi saya, ini harus menjadi style sheet pertama. Ubah referensi sheet (0) ke nomor sheet yang sesuai jika Anda perlu membuatnya nanti dalam urutan sheet.

— DrDave
sumber
2

@Kevin Florida Jika Anda memiliki beberapa divs dengan kelas yang sama, Anda dapat menggunakannya seperti ini:

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

saya menggunakan tipe konten dalam Colorbox

$(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
sumber
2

Dalam kasus saya, saya harus mencetak gambar di dalam halaman. Ketika saya menggunakan solusi yang dipilih, saya memiliki 1 halaman kosong dan yang lainnya menunjukkan gambar. Semoga ini bisa membantu seseorang.

Berikut ini css yang saya gunakan:

@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%;
  }
}

Html saya adalah:

<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
sumber
2

Css terbaik agar sesuai dengan ketinggian ruang kosong:

@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
sumber
2

Cara terbaik untuk mencetak Div ​​tertentu atau Elemen apa pun

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
sumber
1

Gunakan Lembar Gaya khusus untuk mencetak

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

dan kemudian tambahkan kelas yaitu "noprint" ke setiap tag yang isinya tidak ingin Anda cetak.

Dalam penggunaan CSS 

.noprint {
  display: none;
}
— Xn0vv3r
sumber
1

Jika Anda hanya ingin mencetak div ini, Anda harus menggunakan instruksi:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
— Jason Plank
sumber
1

Fungsi printDiv () keluar beberapa kali, tetapi dalam hal ini, Anda kehilangan semua elemen pengikatan dan nilai input Anda. Jadi, solusi saya adalah membuat div untuk semua yang disebut "body_allin" dan satu lagi di luar yang pertama disebut "body_print".

Kemudian Anda memanggil fungsi ini:

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
sumber
Baris ini dapat berguna jika Anda ingin id unik: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');
— pmrotule
1

Anda dapat menggunakan gaya CSS terpisah yang menonaktifkan setiap konten lain kecuali yang dengan id "printarea".

Lihat Desain CSS: Pergi ke Cetak untuk penjelasan dan contoh lebih lanjut.

— Kosi2801
sumber
Memperbarui tautan ke lokasi baru. Sebuah komentar daripada downvote akan lebih baik.
— Kosi2801
1

Saya punya beberapa gambar masing-masing dengan tombol dan perlu mengklik tombol untuk mencetak setiap div dengan gambar. Solusi ini berfungsi jika saya telah menonaktifkan cache di browser saya, dan ukuran gambar tidak berubah di Chrome:

        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!" />
— cinta hidup
sumber
1

Satu lagi pendekatan tanpa mempengaruhi halaman saat ini dan juga bertahan css saat mencetak. Di sini pemilih harus pemilih pemilih tertentu yang kontennya perlu kita cetak.

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

Di sini disediakan beberapa waktu menunjukkan bahwa css eksternal dapat diterapkan untuk itu.

— Mukesh Kumar Suman
sumber
CSS terkadang membutuhkan waktu untuk memuat, pendekatan ini adalah apa yang saya cari untuk memuat ulang halaman sebelum dicetak. Terima kasih
— Arpit Shrivastava
1

Saya mencoba banyak solusi yang disediakan. Tidak ada yang bekerja dengan sempurna. Mereka kehilangan ikatan CSS atau JavaScript. Saya menemukan solusi sempurna dan mudah yang tidak kehilangan CSS atau JavaScript.

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
sumber
Ini pembukaan dan pembuatan jendela lain yang tidak berfungsi di Android. Hanya window.print () langsung yang berfungsi.
— Merv
1

Saya sangat terlambat ke pesta ini, tetapi saya ingin melakukan pendekatan lain. Saya menulis modul JavaScript kecil bernama PrintElements untuk mencetak bagian halaman web secara dinamis.

Ia bekerja dengan melakukan iterasi melalui elemen node yang dipilih, dan untuk setiap node, ia melintasi pohon DOM sampai elemen BODY. Pada setiap tingkat, termasuk yang awal (yang merupakan tingkat simpul yang akan dicetak), ia melampirkan kelas penanda ( pe-preserve-print) ke simpul saat ini. Kemudian lampirkan kelas marker lain ( pe-no-print) ke semua saudara kandung dari simpul saat ini, tetapi hanya jika tidak ada pe-preserve-printkelas pada mereka. Sebagai tindakan ketiga, itu juga melampirkan kelas lain untuk elemen leluhur yang dilestarikan pe-preserve-ancestor.

Css hanya cetak tambahan mati-sederhana akan menyembunyikan dan menampilkan elemen masing-masing. Beberapa manfaat dari pendekatan ini adalah bahwa semua gaya dipertahankan, tidak membuka jendela baru, tidak perlu berpindah-pindah banyak elemen DOM, dan umumnya tidak invasif dengan dokumen asli Anda.

Lihat demo , atau baca artikel terkait untuk detail lebih lanjut .

— András Szepesházi
sumber
0

Saya menemukan solusinya.

@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;
    }
}
— pengguna2573099
sumber
0

berdasarkan jawaban @Kevin Florida, saya membuat cara untuk menghindari skrip pada menonaktifkan halaman saat ini karena menimpa konten. Saya menggunakan file lain yang disebut "printScreen.php" (atau .html). Bungkus semua yang ingin Anda cetak dalam "printSource" div. Dan dengan javascript, buka jendela baru yang Anda buat sebelumnya ("printScreen.php") lalu ambil konten di "printSource" dari jendela atas.

Ini kodenya.

Jendela utama : 

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>

Ini adalah "printScreen.php" - file lain untuk mengambil konten untuk dicetak 

<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
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.