0

我正在尝试使用名为“容器”的类打印特定 div 的内容，该类具有许多具有各自类的 div。我面临的问题是，当我单击打印按钮时，打印预览显示要以完全纯格式打印的内容，没有应用 css 样式。但我希望内容与浏览器中的显示方式完全相同。我从这里尝试了多种方法和解决方案，但似乎没有任何效果。请建议我一些方法来做到这一点。我试图用javascript来做。下面给出的 javascript 代码是 cpied，因为我说我正在尝试所有可能的方法。

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

下图是它在浏览器中的显示方式和在预览中的显示方式

这就是我希望它打印的方式

这就是想要打印的方式这就是它的打印方式] 2

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

2 回答 2

1

考虑以下示例：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);
  });
});

您可以在此处使用.clone()复制现有样式表链接。这将确保它使用与主页相同的内容。

最好不要混合使用 JavaScript 和 jQuery，坚持使用其中一个是一种更好的做法。在这种情况下，使用原生 JavaScript 管理 iFrame 元素会更容易一些。

更新

您可能会考虑制作一个新功能：https ://jsfiddle.net/Twisty/aspehr0m/38/

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();
  });
});
于 2021-09-21T19:27:59.523 回答
0

使用 URL 或可访问路径，而不是：

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

顺便说一句，javascript似乎没问题，如果拼写错误，您的页面将不会显示内容

于 2021-09-21T17:37:36.783 回答