42
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Tôi đang cố gắng thực hiện một tính năng in trong HTML. Tôi biết tôi có thể in toàn bộ trang với
$['SelectorToPrint'].printElement[];
7, nhưng làm cách nào để in chỉ một phần tử trang cụ thể? Ví dụ một $['SelectorToPrint'].printElement[];
8 cụ thể.
Anirvan
6.1845 Huy hiệu vàng38 Huy hiệu bạc53 Huy hiệu Đồng5 gold badges38 silver badges53 bronze badges
hỏi ngày 28 tháng 6 năm 2011 lúc 2:33Jun 28, 2011 at 2:33
2
Bạn có thể sử dụng bảng kiểu CSS cụ thể và ẩn tất cả mọi thứ nhưng những gì bạn muốn in.
$['SelectorToPrint'].printElement[];
9Chỉ cần lớp
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[];
}
0 sẽ được ẩn, nhưng bất cứ điều gì có lớp in sẽ hiển thị.
.no-print { display: none; }
Đã trả lời ngày 28 tháng 6 năm 2011 lúc 2:34Jun 28, 2011 at 2:34
Ashurexmashurexmashurexm
6.1513 huy hiệu vàng44 Huy hiệu bạc69 Huy hiệu đồng3 gold badges44 silver badges69 bronze badges
11
Nếu bạn quen thuộc với jQuery, bạn có thể sử dụng plugin phần tử in như thế này:
$['SelectorToPrint'].printElement[];
Đã trả lời ngày 28 tháng 6 năm 2011 lúc 4:07Jun 28, 2011 at 4:07
Ravan Scafiravan ScafiRavan Scafi
6.3641 Huy hiệu vàng23 Huy hiệu bạc32 Huy hiệu đồng1 gold badge23 silver badges32 bronze badges
3
Đã tạo ra một cái gì đó chung chung để sử dụng trên bất kỳ phần tử HTML nào
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[];
Hy vọng điều này giúp đỡ liên quan đến Gaurav Khurana
Regards
Gaurav
Khurana
Đã trả lời ngày 2 tháng 4 năm 2016 lúc 11:25Apr 2, 2016 at 11:25
GauravgauravGaurav
8139 Huy hiệu bạc11 Huy hiệu đồng9 silver badges11 bronze badges
1
HTML đơn giản và JavaScript tinh khiết hoạt động tốt nhất. Tham số "Điều này" đề cập đến ID hiện tại, vì vậy hàm đó là phổ quát cho tất cả các ID. Bằng cách sử dụng "ref.textContent" thay vì "ref.innerhtml", bạn chỉ có thể trích xuất nội dung văn bản để in.
cơ thể html:
element to print
JavaScript thuần túy:
/*or:
monitor.textContent = "click me to print content";
const imga = new Image[200]; //width
imga.src = "./example.jpg";
monitor.appendChild[imga];
*/
const idElementPrint = ref => {
const iframe = document.createElement["iframe"];
iframe.style.display = "none";
document.body.appendChild[iframe];
const pri = iframe.contentWindow;
pri.document.open[];
pri.document.write[ref.innerHTML];
pri.document.close[];
pri.focus[];
pri.print[];
pri.onafterprint = [] => { document.body.removeChild[iframe]; }
}
Đã trả lời ngày 10 tháng 11 năm 2020 lúc 16:37Nov 10, 2020 at 16:37
3
Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng bản sao để làm như sau:
function printElement[e] {
var ifr = document.createElement['iframe'];
ifr.style='height: 0px; width: 0px; position: absolute'
document.body.appendChild[ifr];
$[e].clone[].appendTo[ifr.contentDocument.body];
ifr.contentWindow.print[];
ifr.parentElement.removeChild[ifr];
}
và sử dụng như vậy:
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[];
}
1Đã trả lời ngày 7 tháng 6 năm 2017 lúc 21:45Jun 7, 2017 at 21:45
mwagmwagmwag
3.10626 huy hiệu bạc35 huy hiệu đồng26 silver badges35 bronze badges
2
Nếu tôi hiểu rõ bạn, bạn có thể sử dụng CSS3 để in phần tử HTML đã chọn của bạn.
@media print {
body.print-element *:not[.print] {
display: none;
}
}
Lưu ý rằng bạn chỉ cần một bộ chọn. Điều này cho phép bạn dễ dàng in một phần tử hoặc toàn bộ trang bằng các lớp CSS.
Tại đây bạn có thể kiểm tra một ví dụ làm việc: //jsfiddle.net/gengns/d50m8ztu/
Đã trả lời ngày 27 tháng 5 năm 2020 lúc 11:04May 27, 2020 at 11:04
GENGNSGENGNSgengns
1.45013 huy hiệu bạc20 Huy hiệu đồng13 silver badges20 bronze badges
1
Nếu bạn đang sử dụng bootstrap, chỉ cần thêm ClassName d-print-none vào các yếu tố bạn không muốn hiển thị khi in
Đã trả lời ngày 17 tháng 8 năm 2021 lúc 14:37Aug 17, 2021 at 14:37
1
Tôi tìm thấy một giải pháp không có vấn đề về các giải pháp khác. Nó sao chép phần tử in lên cơ thể, và khá thanh lịch và chung chung:
CSS:
@media print {
body *:not[.printable, .printable *] {
// hide everything but printable elements and their children
display: none;
}
}
JS:
function printElement[e] {
let cloned = e.cloneNode[true];
document.body.appendChild[cloned];
cloned.classList.add["printable"];
window.print[];
document.body.removeChild[cloned];
}
Hạn chế duy nhất là yếu tố mất phong cách mà nó được thừa hưởng từ cha mẹ trước đó. Nhưng nó hoạt động trên các yếu tố tùy ý trong cấu trúc tài liệu
Đã trả lời ngày 10 tháng 12 năm 2021 lúc 12:23Dec 10, 2021 at 12:23
BoltkeyboltkeyBoltKey
1.8251 Huy hiệu vàng12 Huy hiệu bạc24 Huy hiệu đồng1 gold badge12 silver badges24 bronze badges
1
Thêm phương pháp này
$['SelectorToPrint'].printElement[];
0Đã trả lời ngày 7 tháng 6 năm 2021 lúc 12:44Jun 7, 2021 at 12:44
Hasan_NaserHasan_NaserHasan_Naser
4163 Huy hiệu bạc12 Huy hiệu Đồng3 silver badges12 bronze badges
1
Nếu bạn cần in phần tử HTML bằng JS thuần túy, bạn có thể mở một cửa sổ chỉ chứa phần tử bạn muốn in [mà không có bất kỳ điểm đánh dấu HTML nào].
Chẳng hạn, bạn có thể tự in hình ảnh mà không cần quấn nó trong bất kỳ HTML nào bằng cách mở hình ảnh này trong một cửa sổ mới dưới dạng tệp.
Lưu ý: 'Có thể hiển thị = Không' không thực sự làm cho cửa sổ trở nên vô hình, nhưng nó cho phép mở nó dưới dạng một cửa sổ riêng biệt [không phải là một tab].
Sự kiện dấu hiệu cho phép chúng tôi đóng cửa sổ khi hộp thoại in được đóng. event.target trỏ đến thể hiện cửa sổ đã mở.
Lưu ý: Afterprint phải được chỉ định trước khi gọi .print [], nếu không nó sẽ không được gọi.
$['SelectorToPrint'].printElement[];
1
Dharman ♦♦
28.1K21 Huy hiệu vàng75 Huy hiệu bạc127 Huy hiệu đồng21 gold badges75 silver badges127 bronze badges
Đã trả lời ngày 5 tháng 7 năm 2021 lúc 16:39Jul 5, 2021 at 16:39
GuestGuestGuest
Huy hiệu 111 Đồng1 bronze badge
In HTML hoặc HTML đã chọn dễ dàng bằng cách sử dụng print.js Thêm thư viện in.js
$['SelectorToPrint'].printElement[];
2Đã trả lời ngày 11 tháng 12 năm 2018 lúc 12:26Dec 11, 2018 at 12:26
Việc triển khai này sẽ tạo và áp dụng một phong cách tạm thời đặc biệt che giấu tất cả các yếu tố trên phương tiện in ngoại trừ phương tiện mà chúng tôi muốn in. Sau khi in, phong cách tạm thời được loại bỏ, vì vậy tài liệu của bạn sẽ trở lại trạng thái ban đầu.
Hãy thoải mái điều chỉnh phong cách ad-hoc [như kích thước papar, lề, v.v.] để phù hợp với nhu cầu của bạn.
$['SelectorToPrint'].printElement[];
3Đã trả lời ngày 20 tháng 2 lúc 19:27Feb 20 at 19:27
Eugen Mihailescueugen MihailescuEugen Mihailescu
3.3582 Huy hiệu vàng29 Huy hiệu bạc29 Huy hiệu đồng2 gold badges29 silver badges29 bronze badges
Cách đơn giản nhất để làm điều đó là:
$['SelectorToPrint'].printElement[];
4Đã trả lời ngày 14 tháng 4 năm 2021 lúc 19:35Apr 14, 2021 at 19:35
Blaze612 ytblaze612 ytBlaze612 YT
4444 Huy hiệu bạc12 Huy hiệu đồng4 silver badges12 bronze badges
$['SelectorToPrint'].printElement[];
5Đã trả lời ngày 17 tháng 8 lúc 3:25Aug 17 at 3:25
Đây là một giải pháp khác [có lẽ là hiện đại hơn?]:
$['SelectorToPrint'].printElement[];
6
Pang
9.223146 Huy hiệu vàng85 Huy hiệu bạc118 Huy hiệu đồng146 gold badges85 silver badges118 bronze badges
Đã trả lời ngày 27 tháng 1 năm 2017 lúc 2:24Jan 27, 2017 at 2:24
1