Cetak isi DIV

337

Apa cara terbaik untuk mencetak konten DIV?

javascript jquery html printing usertest
sumber

Coba cetak elemen di sini

Gabe

1

Apa yang Anda maksud dengan cetak? Seperti pada printer fisik?

Yuriy Faktorovich

"Cetak" seperti pada printer? atau ke dokumen?

Ed Schembor

Saya telah menemukan plugin terbaik sejauh ini dikembangkan oleh etimbo github.com/etimbo/jquery-print-preview-plugin

MaxI

3

Sama seperti referensi bagi siapa pun yang mencoba mencari solusi untuk masalah ini mencetak div. Saya menemukan jawaban berikut ini sangat berguna: stackoverflow.com/a/7532581/405117

Vikram

518

Sedikit perubahan pada versi sebelumnya - diuji pada CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

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

    mywindow.print();
    mywindow.close();

    return true;
}

Bill Paetzke
sumber

8

Ini solusi cepat. Solusi ideal adalah dengan menggunakan CSS terpisah untuk mencetak. Mungkin Anda bisa menguraikan detail (persyaratan) masalah Anda.

Bill Paetzke

6

Anda dapat mereferensikan stylesheet di jendela sembulan. Tambahkan baris kode lain di antara tag <head>: mywindow.document.write ('<link rel = "stylesheet" href = "main.css" type = "text / css" />');

Bill Paetzke

5

@Rahil ubah ke ini: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();

ROFLwTIME

3

^ tambahkan newwindow.focus (); untuk mengaktifkan print cross-browser.

JackMahoney

7

Kadang-kadang terjadi jika gagal memuat pratinjau cetak, mungkin ketika konten untuk mencetak cukup besar (saya perhatikan hanya dengan Chrome sementara halaman yang sama mencetak perfeclty di Firefox, namun saya tidak mengecualikan itu mungkin terjadi di Firefox atau browser lain juga). Cara terbaik yang saya temukan adalah menjalankan cetakan (dan tutup) hanya setelah windows dimuat. Jadi setelah: mywindow.document.write(data);Tambahkan ini:

mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');

Dan hapus: mywindow.print();danmywindow.close();

Fabius

164

Saya pikir ada solusi yang lebih baik. Buat div Anda untuk mencetak menutupi seluruh dokumen, tetapi hanya ketika itu dicetak:

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

SM.
sumber

Sempurna, jauh lebih bagus daripada sembulan.

GreenWebDev

5

Sayangnya, itu tidak akan berfungsi di IE seperti yang diharapkan, lihat ini: stackoverflow.com/questions/975129/…

jarek.jpa

16

Konten yang seharusnya meluap ke beberapa halaman tampaknya terpotong di Chrome.

Ismael Smyrnow

Pada IE Anda perlu menyembunyikan sisa dokumen. Memodifikasi di atas sebagai berikut akan berfungsi: @ media print {body * {display: none; } .myDivToPrint {display: block; background-color: putih; tinggi: 100%; lebar: 100%; posisi: tetap; atas: 0; kiri: 0; margin: 0; padding: 15px; ukuran font: 14px; garis-tinggi: 18px; }}

RonnBlack

2

Anda mungkin perlu memasukkan z-index: 9999999; jika Anda memiliki elemen lain yang diposisikan lebih tinggi.

Adam M.

43

Meskipun ini telah dikatakan oleh @ gabe , Jika Anda menggunakan jQuery, Anda dapat menggunakan printElementplugin saya .

Ada contoh di sini , dan informasi lebih lanjut tentang plugin di sini .

Penggunaannya agak lurus ke depan, ambil saja elemen dengan pemilih jQuery dan cetak:

$("#myDiv").printElement();

Saya harap ini membantu!

Erik
sumber

14

8 tahun kemudian, ini akan menghasilkan "a.browser tidak terdefinisi" karena panggilan .browser telah dihapus di jquery 1.9

KingsInnerSoul

1

@KingsInnerSoul jangan terlalu kasar dengan pengguna jQuery, kali ini cukup keras bagi mereka; p

Alexandre Daubricourt

22

Menggunakan Jquery, cukup gunakan fungsi ini:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

Tombol cetak Anda akan terlihat seperti ini:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

Sunting: Jika Anda memiliki data formulir yang perlu Anda simpan, klon tidak akan menyalinnya, jadi Anda hanya perlu mengambil semua data formulir dan menggantinya setelah mengembalikan seperti itu:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>

Gary Hayes
sumber

$ ('body'). html (restorepage); tidak akan berfungsi karena pada saat itu tidak ada elemen tubuh yang tersedia. oleh karena itu akan lebih baik untuk menggantinya dengan location.reload ();

Debugger

Tidak. Jika Anda memuat ulang halaman, Anda akan menghapus semua informasi dalam bentuk, atau pengaturan lain yang mungkin perlu ada di sana. Ini bekerja dengan sangat baik. Jika Anda meluangkan waktu untuk melihat kode, Anda akan melihat bahwa vor restorepage TIDAK memiliki semua informasi halaman yang tersedia untuk melakukan penggantian. Berhentilah mencoba mengedit kode saya dan mengujinya sendiri atau pelajari apa yang dilakukan masing-masing bagian fungsi.

Gary Hayes

Ini lebih baik. Ini termasuk desain halaman saat mencetak tidak seperti yang disebutkan di atas di mana saya masih perlu menempatkan tautan css dari header dll. Terima kasih!

Jorz

cara yang Anda lewati elsangat buruk, terutama karena menggunakan jQ. Jauh lebih baik untuk hanya lulus selectordan menyingkirkan kode keras#

RozzA

Saya selalu menggunakan metode ini hari ini saya perhatikan bahwa itu tidak berfungsi dengan baik pada perangkat android (Google Chrome). Area halaman yang dapat dicetak berubah setiap saat dan berisi beberapa bagian tambahan el. Saya pikir perintah cetak dikirim ketika tubuh sedang dipulihkan.

Ali Sheikhpour

18

Dari sini http://forums.asp.net/t/1261525.aspx

<html>

<head>
    <script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>
    <title>div print</title>
</head>

<body>
    //HTML Page //Other content you wouldn't like to print
    <input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

    <div id="div_print">

        <h1 style="Color:Red">The Div content which you want to print</h1>

    </div>
    //Other content you wouldn't like to print //Other content you wouldn't like to print
</body>

</html>

huston007
sumber

1

diperlukan modifikasi untuk membagi footerStr menjadi 2 bagian. karena brwoser menggunakan "</body>" sebagai ujung utama halaman saat ini. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;

mirzaei

13

saya menggunakan Bill Paetzkejawaban untuk mencetak div yang berisi gambar tetapi tidak bekerja dengan google chrome

saya hanya perlu menambahkan baris ini myWindow.onload=function(){untuk membuatnya berfungsi dan di sini adalah kode lengkap

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>

juga jika seseorang hanya perlu mencetak div dengan id dia tidak perlu memuat jquery

di sini adalah kode javascript murni untuk melakukan ini

<html>
<head>
    <script type="text/javascript">
        function PrintDiv(id) {
            var data=document.getElementById(id).innerHTML;
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>

Saya harap ini dapat membantu seseorang

Robert
sumber

Ini berhasil untuk saya! Camelcase memang menggigit saya karena jawaban aslinya menggunakan "jendela saya" vs. "jendela saya". Terima kasih!

opcode

12

function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

Ini akan mencetak divarea yang Anda inginkan dan mengatur konten kembali seperti semula. printdivnameadalah divuntuk dicetak.

Techie
sumber

diperlukan modifikasi untuk membagi footerStr menjadi 2 bagian. karena brwoser menggunakan "</body>" sebagai ujung utama halaman saat ini. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;

mirzaei

Itu cerdik! Tapi ya, Anda memang perlu hack dari mirzaei, selain itu tag bodynya rusak dan Anda mendapatkan format rusak. Dengan peretasan, ini berhasil! Anda bahkan dapat menambahkan bungkus dalam Anda sendiri untuk memfasilitasi gaya cetak khusus. Ini harus menjadi jawaban yang diterima.

user2662680

9

Buat lembar gaya cetak terpisah yang menyembunyikan semua elemen lain kecuali konten yang ingin Anda cetak. Tandai menggunakan itu 'media="print"saat Anda memuatnya:

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

Ini memungkinkan Anda untuk memiliki lembar gaya yang sama sekali berbeda untuk dicetak.

Jika Anda ingin memaksa dialog cetak browser muncul untuk halaman tersebut, Anda dapat melakukannya seperti ini saat memuat menggunakan JQuery:

$(function() { window.print(); });

atau dipicu dari acara lain yang Anda inginkan seperti pengguna mengklik tombol.

Carl Russmann
sumber

2

Ya itu akan berhasil juga; sulit - yah, mustahil - untuk tahu persis apa skenario itu.

Runcing

Saya setuju bahwa CSS yang terpisah adalah solusi ideal. Dan menyalin isi div ke jendela baru adalah solusi cepat.

Bill Paetzke

9

Saya pikir solusi yang diusulkan sejauh ini memiliki kelemahan berikut:

Solusi kueri media CSS menganggap hanya ada satu div untuk dicetak.
Solusi javascript hanya berfungsi pada browser tertentu.
Menghancurkan konten jendela induk dan membuat ulang yang membuat kekacauan.

Saya telah meningkatkan solusi di atas. Berikut adalah sesuatu yang telah saya uji yang bekerja sangat baik dengan manfaat berikut.

Bekerja di semua browser termasuk IE, Chrome, Safari dan firefox.
Tidak menghancurkan dan memuat kembali jendela induk.
Dapat mencetak sejumlah DIV dalam satu halaman.
Menggunakan template html untuk menghindari penggabungan string rawan kesalahan.

Poin-Poin Penting untuk diperhatikan:

Harus memiliki onload = "window.print ()" di jendela yang baru dibuat.
Jangan panggil targetwindow.close () atau targetwindow.print () dari induknya.
Pastikan Anda melakukan targetwindow.document.close () dan target.focus ()
Saya menggunakan jquery tetapi Anda dapat melakukan teknik yang sama menggunakan javascript biasa juga.
Anda dapat melihat ini beraksi di sini http://math.tools/table/multiplication . Anda dapat mencetak setiap tabel secara terpisah, dengan mengklik tombol cetak pada header kotak.

<script id="print-header" type="text/x-jquery-tmpl">
   <html>
   <header>
       <title>Printing Para {num}</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <style>
          body {
            max-width: 300px;
          }
       </style>
   </header>
   <body onload="window.print()">
   <h2>Printing Para {num} </h2>
   <h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
    </body>
    </html>
</script>
<script>
$('.printthis').click(function() {
   num = $(this).attr("data-id");
   w = window.open();
   w.document.write(
                   $("#print-header").html().replace("{num}",num)  +
                   $("#para-" + num).html() +
                   $("#print-footer").html() 
                   );
   w.document.close();
   w.focus();
   //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
   ///w.close(); Don't do this otherwise chrome won't work
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
  
<p class="para" id="para-1">
  Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  

<p class="para" id="para-2">
  Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Luaskan cuplikan

dors
sumber

Ini sangat bagus dan bekerja lintas-browser jauh lebih baik daripada hasil yang diterima!

dama_do_bling

7

Saya menulis sebuah plugin untuk mengatasi skenario ini. Saya tidak senang dengan plugin di luar sana, dan mulai membuat sesuatu yang lebih luas / dapat dikonfigurasi.

https://github.com/jasonday/printThis

Jason
sumber

1

Terima kasih banyak atas kerja keras Anda Jason ..... !! Benar-benar akan digunakan dalam lebih banyak proyek saya. Apa yang seorang pria plugin pikiran bertiup ......

6

Solusi yang diterima tidak berfungsi. Chrome mencetak halaman kosong karena itu tidak memuat gambar pada waktunya. Pendekatan ini bekerja:

Sunting: Tampaknya solusi yang diterima diubah setelah posting saya. Mengapa downvote? Solusi ini juga berfungsi.

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

cinta hidup
sumber

4

Saya tahu ini adalah pertanyaan lama, tetapi saya memecahkan masalah ini dengan jQuery.

function printContents(id) {
    var contents = $("#"+id).html();

    if ($("#printDiv").length == 0) {
      var printDiv = null;
      printDiv = document.createElement('div');
      printDiv.setAttribute('id','printDiv');
      printDiv.setAttribute('class','printable');
      $(printDiv).appendTo('body');
    }

    $("#printDiv").html(contents);

    window.print();

    $("#printDiv").remove();
}

CSS

  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
  }

Jazzy
sumber

3

Meskipun jawaban @BC adalah yang terbaik untuk mencetak satu halaman.

Tetapi Untuk mencetak banyak halaman berukuran A4 secara bersamaan dengan ctrl + P solusi berikut dapat membantu.

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}

arslan
sumber

2

Buka jendela baru
Buka objek dokumen dari jendela baru dan tulis ke dalamnya dokumen sederhana yang tidak mengandung apa-apa selain div yang Anda punya dan perlu html header dll - Anda mungkin juga ingin memiliki dokumen menarik stylesheet, tergantung pada konten Anda
Letakkan skrip di halaman baru untuk memanggil window.print ()
Trigger skrip

Runcing
sumber

2

Ini adalah plugin cetak jquery saya

(function ($) {

$.fn.printme = function () {
    return this.each(function () {
        var container = $(this);

        var hidden_IFrame = $('<iframe></iframe>').attr({
            width: '1px',
            height: '1px',
            display: 'none'
        }).appendTo(container);

        var myIframe = hidden_IFrame.get(0);

        var script_tag = myIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
        script_tag.appendChild(script);

        myIframe.contentWindow.document.body.innerHTML = container.html();
        myIframe.contentWindow.document.body.appendChild(script_tag);

        myIframe.contentWindow.Print();
        hidden_IFrame.remove();

    });
};
})(jQuery);

karaxuna
sumber

2

Jika Anda ingin memiliki semua gaya dari dokumen asli (termasuk gaya sebaris), Anda dapat menggunakan pendekatan ini.

Salin dokumen lengkap
Ganti tubuh dengan elemen yang ingin Anda cetak.

Penerapan:

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}

Stefan Norberg
sumber

2

Saya tidak tahu bahwa ini adalah solusi terbaik, tetapi ini bekerja dengan sempurna. Terima kasih!

BRogers

2

Catatan: Ini hanya berfungsi dengan situs yang mengaktifkan jQuery

Sangat sederhana dengan trik keren ini. Ini bekerja untuk saya di browser Google Chrome . Firefox tidak akan memungkinkan Anda untuk mencetak ke PDF tanpa plugin.

Pertama, buka inspektur menggunakan (Ctrl + Shift + I) / (Cmd + Option + I).
Ketikkan kode ini di konsol:

var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours

Ini meluncurkan dialog cetak. Ambil cetakan fisik atau simpan ke PDF (dalam chrome). Selesai!

Logikanya sederhana. Kami membuat tag skrip baru dan melampirkannya di depan tag tubuh penutup. Kami menyuntikkan ekstensi cetak jQuery ke HTML. Ubah myDivWithStyles dengan ID tag Div Anda sendiri. Sekarang dibutuhkan persiapan jendela virtual yang dapat dicetak.

Cobalah di situs mana saja. Hanya peringatan yang kadang-kadang ditulis dengan CSS sulit yang dapat menyebabkan hilangnya gaya. Tapi kami sering mendapatkan konten.

Naren Yellavula
sumber

1

Di Opera, coba:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

kemuraman
sumber

1

Berikut ini adalah solusi IFrame yang berfungsi untuk IE dan Chrome:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}

kofifus
sumber

1

Membuat sesuatu yang generik untuk digunakan pada elemen HTML apa pun

HTMLElement.prototype.printMe = printMe;
function printMe(query){             
     var myframe = document.createElement('IFRAME');
     myframe.domain = document.domain;
     myframe.style.position = "absolute";
     myframe.style.top = "-10000px";
     document.body.appendChild(myframe);
     myframe.contentDocument.write(this.innerHTML) ;
     setTimeout(function(){
        myframe.focus();
        myframe.contentWindow.print();
        myframe.parentNode.removeChild(myframe) ;// remove frame
     },3000); // wait for images to load inside iframe
     window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

Semoga ini membantu.

Gaurav
sumber

1

Saya memodifikasi jawaban @BillPaetski untuk menggunakan kueriSelektor, menambahkan CSS opsional, menghapus tag H1 yang dipaksakan dan membuat judul ditentukan secara spesifik atau ditarik dari jendela. Ini juga tidak mencetak secara otomatis lagi dan mengekspos internal sehingga mereka dapat diaktifkan dalam fungsi pembungkus atau seperti yang Anda inginkan.

Hanya dua vars pribadi adalah tmpWindow dan tmpDoc meskipun saya percaya akses judul, css dan elem dapat bervariasi, harus diasumsikan bahwa semua argumen fungsi bersifat pribadi.

Kode:

function PrintElem(elem, title, css) {
    var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
    var tmpDoc = tmpWindow.document;

    title = title || document.title;
    css = css || "";

    this.setTitle = function(newTitle) {
        title = newTitle || document.title;
    };

    this.setCSS = function(newCSS) {
        css = newCSS || "";
    };

    this.basicHtml5 = function(innerHTML) {
        return '<!doctype html><html>'+(innerHTML || "")+'</html>';
    };

    this.htmlHead = function(innerHTML) {
        return '<head>'+(innerHTML || "")+'</head>';
    };

    this.htmlTitle = function(title) {
        return '<title>'+(title || "")+'</title>';
    };

    this.styleTag = function(innerHTML) {
        return '<style>'+(innerHTML || "")+'</style>';
    };

    this.htmlBody = function(innerHTML) {
        return '<body>'+(innerHTML || "")+'</body>';
    };

    this.build = function() {
        tmpDoc.write(
            this.basicHtml5(
                this.htmlHead(
                    this.htmlTitle(title) + this.styleTag(css)
                ) + this.htmlBody(
                    document.querySelector(elem).innerHTML
                )
            )
        );
        tmpDoc.close(); // necessary for IE >= 10
    };

    this.print = function() {
        tmpWindow.focus(); // necessary for IE >= 10*/
        tmpWindow.print();
        tmpWindow.close();
    };

    this.build();
    return this;
}

Pemakaian:

DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();

MrMesees
sumber

Juga, itu tidak menyalin nilai-nilai <input>elemen. Bagaimana saya bisa menggunakan ini termasuk apa yang diketik pengguna?

Malcolm Salvador

@ Malky. Tolong pikirkan apa yang Anda minta. Jika Anda ingin mencetak formulir, Anda perlu untuk menghubungkan peristiwa blur pada elemen formulir, dan menetapkan nilai atribut, yang dipilih, default dan innerText dari <input>, <select>, <textarea>compontents menjadi nilai runtime mereka. Ada beberapa alternatif, tetapi ini bukan masalah dengan skrip ini, tetapi masalah dengan cara kerja browser, dan dapatkan innerHTMLproperti dokumen dengan input, kanvas, dll.

MrMesees

Saya sudah sampai pada solusi dengan via .attr('value',). Saya bahkan sudah melakukannya untuk textarea (dengan menambahkan) dan kotak centang ( .attr('checked',)). Saya menyesal jika saya tidak berpikir cukup tentang apa yang saya minta.

Malcolm Salvador

Mau berbagi dengan kelas? mungkin intisari atau sesuatu dalam komentar. Saya akan mengangkatnya.

MrMesees

0

Kode di bawah ini menyalin semua node yang relevan yang ditargetkan oleh pemilih kueri, salinan gaya mereka seperti yang terlihat di layar, karena banyak elemen induk yang digunakan untuk menargetkan penyeleksi css akan hilang. Ini menyebabkan sedikit kelambatan jika ada banyak simpul anak dengan banyak gaya.

Idealnya Anda memiliki lembar gaya cetak yang siap, tetapi ini untuk kasus-kasus penggunaan di mana tidak ada lembar gaya cetak yang akan dimasukkan dan Anda ingin mencetak seperti yang terlihat di layar.

Jika Anda menyalin item di bawah ini di konsol browser pada halaman ini, ia akan mencetak semua potongan kode di halaman ini.

+function() {
    /**
     * copied from  /programming/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };


    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }

    /** select elements to print with query selector **/
    var printSelection = function(querySelector) {
        // Create an iframe to make sure everything is clean and ordered.
        var iframe = document.createElement('iframe');
        // Give it enough dimension so you can visually check when modifying.
        iframe.width = document.width;
        iframe.height = document.height;
        // Add it to the current document to be sure it has the internal objects set up.
        document.body.append(iframe);

        var nodes = document.querySelectorAll(querySelector);
        if(!nodes || nodes.length == 0) {
           console.error('Printing Faillure: Nothing to print. Please check your querySelector');
           return;
        }

        for(i=0; i < nodes.length; i++) {

            // Get the node you wish to print.
            var origNode = nodes[i];

            // Clone it and all it's children
            var node = origNode.cloneNode(true);

            // Copy the base style.
            copyComputedStyle(origNode, node);

            if(origNode.children && origNode.children.length > 0) {
                buildChild(origNode.children, node.children);
            }

            // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.

            iframe.contentWindow.document.body.append(node);
        }
        // Print the window
        iframe.contentWindow.print();

        // Give the browser a second to gather the data then remove the iframe.
        window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
    }
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')

Tschallacka
sumber

0

Ini benar-benar posting lama tapi ini adalah salah satu pembaruan yang saya buat menggunakan jawaban yang benar. Solusi saya juga menggunakan jQuery.

Intinya adalah menggunakan tampilan cetak yang tepat, sertakan semua lembar gaya untuk pemformatan yang tepat dan juga untuk didukung di sebagian besar browser.

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

Nanti Anda perlu sesuatu seperti ini:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

Cobalah.

Ivijan Stefan Stipic
sumber

-1

Sama dengan jawaban terbaik, kalau-kalau Anda perlu mencetak gambar seperti yang saya lakukan:

Jika Anda ingin mencetak gambar:

function printElem(elem)
    {
        Popup(jQuery(elem).attr('src'));
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<img src="'+data+'" />');
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

Goran Jakovljevic
sumber

Anda melewatkan loadacara di sembulan. Tanpanya Anda akan mencetak halaman kosong karena gambar tidak dimuat. =>$(popup).load(function(){ popup.focus(); popup.print(); });

Tim Vermaelen

-4

Cara terbaik untuk melakukannya adalah dengan mengirimkan konten div ke server dan membuka jendela baru di mana server dapat meletakkan konten-konten itu ke jendela baru.

Jika itu bukan opsi, Anda dapat mencoba menggunakan bahasa sisi klien seperti javascript untuk menyembunyikan segala sesuatu di halaman kecuali div itu dan kemudian mencetak halaman ...

Sonny Boy
sumber

1

Tidak perlu memantulkannya ke server. Anda bisa membuka jendela browser dan mengatur konten dan menjalankan perintah cetak.

Jonathon Faust

Anda dapat membuat jendela baru dari klien.

Runcing

1

Jonathon: Saya suka solusi itu. Apakah Anda memiliki kode contoh?

usertest

Cetak isi DIV

Jawaban: