我正試圖列印一個特定的、具有"container"類的div的內容，該div有許多具有各自的類。我面臨的問題是，當我點擊列印按鈕時，列印預覽顯示的內容完全是普通格式，沒有應用 CSS 樣式。但我想讓內容與瀏覽器中的顯示方式完全一致。我從這里嘗試了很多方法和解決方案，但似乎都不奏效。請給我建議一些方法。我試圖用javascript來做這件事。下面給出的javascript代碼已被復制，因為我說過我正在嘗試所有可能的方法。
javascript
$(function (/span>) {
$("#btnPrint").click(function () {
var contents = $（"#content"）.html（）。
var frame1 = $('<iframe /> ')。
frame1[0].name = "frame1";
frame1.css({ "position"/span>: "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>') 。
//Aappend the external CSS file.
frameDoc.document.write('<link href="C:UsersIntelEnvs estprojectstaticdoc.css" rel="style sheet" type="text/css" /> ')。
//Aappend 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="styleheet" href="{% static 'doc. css' %}" media="all"/>
<div class="main-container">/span>
< div class="container" id="content">/span>
{% if object.reportable %}
<div class="report">
<p>可報告 </p>/span>
</div>/span>
{% endif %}
{% if object.non_reportable %}
<div class="report">/span>
<p>不可報告 </p>/span>
</div>/span>
{% endif %}
{% if object.over_ruled %}
<div class="over">
<p>Over Ruled </p>/span>
</div>/span>
{% endif %}
{% if object.equivalent_citations %}
<div class="cit">
<p><b>等同于引文。 </b> {{object. equivalent_citations}}</p>{object.
</div>
{% endif %}
<div class="crt">
<p><b>In The {{object. court_type}}</b></p>
</div>/span>
<div class=" appeal">
<p><b>/span>{{object. apelLate_type}}</b></p>
</div>/span>
<div class="jdge">
<p> <b>/span>Before: </b>/span>{{object. Judge_name}}</p>{object.
</div>/span>
<div class="party-name">
<p> <b> {{object.party_name}}. </b> </p>
</div>/span>
<div class="case-no">
<p><b>案號。 :</b> {{object.case_no}}. </p> {{ject.case_no}}.
</div>/span>
...
<div class="container-2"> 。
< input type="button" id="btnPrint" value="Print" />
</div>
</div>
uj5u.com熱心網友回復：
使用一個URL或可訪問的路徑來代替：
C:UsersIntelEnvs estprojectstaticdoc.css" rel="stylesheet" type="text/css" /> 順便說一下。
順便說一下，javascript似乎是可以的，如果拼錯了，你的頁面就不會顯示內容
。uj5u.com熱心網友回復：
考慮一下下面的例子。https://jsfiddle.net/Twisty/aspehr0m/7/
JavaScript
$(function(/span>) {
$("#btnPrint").click(function() {
var contents = $("#content"/span>).html()。
var frame1 = $('<iframe> ', {
id: "frame1",
name: "frame1".
})
.css({
"position": "絕對"。
"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 元素會更容易一些。
Update
你可以考慮制作一個新的功能。https://jsfiddle.net/Twisty/aspehr0m/38/
JavaScript
$(function(/span>) {
$.fn.printContent = function（） {
var target = $(this) 。
var title;
if (target.attr("title") != undefined) {
title = target.attr("title") 。
} else {
title = "元素內容"; "元素內容".
}
var uid = Date.now() 。
var printFrame = $("<iframe>"/span>, {
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"/span>).click(function() {
$("#content"/span>).printContent()。
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/331824.html
標籤：
上一篇：如何在HTML/CSS/JavaScript中使狀態欄看起來像某些在線訂購的狀態欄？
下一篇：在提交前通過jquery驗證表單