Saya mencoba mencetak konten div tertentu dengan kelas yang disebut "container" yang memiliki sejumlah div yang memiliki kelas masing-masing. Masalah yang saya hadapi adalah ketika saya mengklik tombol cetak, pratinjau cetak menunjukkan konten yang akan dicetak dalam format yang benar-benar sederhana, tidak ada gaya css yang diterapkan. Tetapi saya ingin kontennya persis seperti yang ditampilkan di browser. Saya telah mencoba beberapa cara dan solusi dari sini tetapi sepertinya tidak ada yang berhasil. Tolong sarankan saya beberapa cara untuk melakukannya. Saya mencoba melakukannya dengan javascript. Kode javascript yang diberikan di bawah ini adalah cpied seperti yang saya katakan saya mencoba semua cara yang mungkin.

javascript

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#content").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

Gambar di bawah ini adalah cara tampilannya di browser dan tampilannya di pratinjau

Ini adalah bagaimana saya ingin mencetaknya

ini cara mencetaknya dan begini cara mencetaknya]2

file html

<link rel="stylesheet" href="{% static 'doc.css' %}" media="all"/>

<div class="main-container">
  <div class="container" id="content"> 

     

        {% if object.reportable %}
        <div class="report">
            <p>Reportable </p>
        </div>
        {% endif %}

        {% if object.non_reportable %}
        <div class="report">
            <p>Non-Reportable </p>
        </div>
        {% endif %}

        {% if object.over_ruled %}
        <div class="over">
            <p>Over Ruled </p>
        </div>
        {% endif %}

        {% if object.equivalent_citations %}
        <div class="cit">
            <p><b>Equivalent Citations:</b> {{object.equivalent_citations}}</p>
        </div>
        {% endif %}

        <div class="crt">
            <p><b>In The {{object.court_type}}</b></p>
        </div>

        <div class="appeal">
            <p><b>{{object.apelLate_type}}</b></p>
        </div>

        <div class="jdge">
            <p> <b>Before:</b> {{object.judge_name}}</p>
        </div>

        <div class="party-name">
            <p> <b> {{object.party_name}} </b> </p>
        </div>

       
        <div class="case-no">
            <p><b>Case No.:</b> {{object.case_no}} </p>
        </div>
        ...
        


  <div class="container-2">
    <input type="button" id="btnPrint" value="Print" />
    </div>
</div>
0
Ritankar Bhattacharjee 21 September 2021, 19:55

2 jawaban

Jawaban Terbaik

Perhatikan contoh berikut: https://jsfiddle.net/Twisty/aspehr0m/7/

JavaScript

$(function() {
  $("#btnPrint").click(function() {
    var contents = $("#content").html();
    var frame1 = $('<iframe>', {
        id: "frame1",
        name: "frame1"
      })
      .css({
        "position": "absolute",
        "top": "-1000000px"
      })
      .appendTo($("body"));
    var myHTML = $("<html>");
    $("<head>").appendTo(myHTML);
    $("<title>").html("DIV Contents").appendTo($("head", myHTML));
    $("<body>").appendTo(myHTML);
    $("body > link").clone().appendTo($("body", myHTML));
    $("body", myHTML).append(contents);
    console.log("Content", myHTML.prop("outerHTML"));
    var frameDoc = window.frames.frame1;
    frameDoc.document.open();
    //Create a new HTML document.
    frameDoc.document.write(myHTML.prop("outerHTML"));
    frameDoc.document.close();
    setTimeout(function() {
      frame1.focus();
      window.frames.frame1.print();
      frame1.remove();
    }, 500);
  });
});

Di sini Anda dapat menggunakan .clone() untuk membuat salinan Link Stylesheet yang ada. ini akan memastikan penggunaan yang sama dengan halaman utama.

Ini dianggap sebagai praktik yang lebih baik untuk tidak mencampur JavaScript dan jQuery, untuk tetap berpegang pada satu atau yang lain. Dalam hal ini, sedikit lebih mudah untuk mengelola elemen iFrame dengan JavaScript asli.

Perbarui

Anda mungkin mempertimbangkan untuk membuat Fungsi baru: https://jsfiddle.net/Twisty/aspehr0m/38/< /a>

JavaScript

$(function() {
  $.fn.printContent = function() {
    var target = $(this);
    var title;
    if (target.attr("title") != undefined) {
      title = target.attr("title");
    } else {
      title = "Element Contents"
    }
    var uid = Date.now();
    var printFrame = $("<iframe>", {
      id: "printFrame_" + uid,
      name: "printFrame_" + uid
    }).css({
      position: "absolute",
      top: "-1000000px"
    }).appendTo($("body"));
    var frameHTML = $("<html>");
    $("<head>").appendTo(frameHTML);
    $("<title>").html(title).appendTo($("head", frameHTML));
    $("<body>").appendTo(frameHTML);
    if ($("body > link").length == 1) {
      $("body > link").clone().appendTo($("body", frameHTML));
    }
    $("body", frameHTML).append(target.html());
    var winFrame = window.frames['printFrame_' + uid];
    winFrame.document.open();
    winFrame.document.write(frameHTML.prop("outerHTML"));
    winFrame.document.close();
    setTimeout(function() {
      printFrame.focus();
      winFrame.print();
      printFrame.remove();
    }, 100);
  };

  $("#btnPrint").click(function() {
    $("#content").printContent();
  });
});
1
Twisty 21 September 2021, 20:50

Gunakan URL atau jalur yang dapat diakses alih-alih:

C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />

Omong-omong, JavaScript tampaknya baik-baik saja, halaman Anda tidak akan menampilkan konten jika salah eja

0
Andrew Garcia 21 September 2021, 17:37