Hướng dẫn print html element - in phần tử html

42

Nội dung chính ShowShow

• Làm cách nào để in một phần nhất định của trang HTML?
• Làm cách nào để in một phần nhất định của trang web?
• Làm cách nào để xem một yếu tố cụ thể trong HTML?
• Lệnh để in trong HTML là gì?

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.
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();

$('SelectorToPrint').printElement();

Anirvan

6.1845 Huy hiệu vàng38 Huy hiệu bạc53 Huy hiệu Đồng5 gold badges38 silver badges53 bronze badges5 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: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();

Chỉ 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();
 }

<style type="text/css" media="print">
   .no-print { display: none; }
</style>

Đã trả lời ngày 28 tháng 6 năm 2011 lúc 2:34Jun 28, 2011 at 2:34Jun 28, 2011 at 2:34

Ashurexmashurexmashurexmashurexm

6.1513 huy hiệu vàng44 Huy hiệu bạc69 Huy hiệu đồng3 gold badges44 silver badges69 bronze badges3 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:07Jun 28, 2011 at 4:07

Ravan Scafiravan ScafiRavan ScafiRavan Scafi

6.3641 Huy hiệu vàng23 Huy hiệu bạc32 Huy hiệu đồng1 gold badge23 silver badges32 bronze badges1 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
Regards
Gaurav Khurana

Đã trả lời ngày 2 tháng 4 năm 2016 lúc 11:25Apr 2, 2016 at 11:25Apr 2, 2016 at 11:25

GauravgauravGauravGaurav

8139 Huy hiệu bạc11 Huy hiệu đồng9 silver badges11 bronze badges9 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:

<div id="monitor" onclick="idElementPrint(this)">element to print
<img src="example.jpg" width="200">
</div>

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: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:

$('SelectorToPrint').printElement();

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

Đã trả lời ngày 7 tháng 6 năm 2017 lúc 21:45Jun 7, 2017 at 21:45Jun 7, 2017 at 21:45

mwagmwagmwagmwag

3.10626 huy hiệu bạc35 huy hiệu đồng26 silver badges35 bronze badges26 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.

$('SelectorToPrint').printElement();

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: https://jsfiddle.net/gengns/d50m8ztu/

Đã trả lời ngày 27 tháng 5 năm 2020 lúc 11:04May 27, 2020 at 11:04May 27, 2020 at 11:04

GENGNSGENGNSgengnsgengns

1.45013 huy hiệu bạc20 Huy hiệu đồng13 silver badges20 bronze badges13 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: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:

$('SelectorToPrint').printElement();

JS:

$('SelectorToPrint').printElement();

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:23Dec 10, 2021 at 12:23

BoltkeyboltkeyBoltKeyBoltKey

1.8251 Huy hiệu vàng12 Huy hiệu bạc24 Huy hiệu đồng1 gold badge12 silver badges24 bronze badges1 gold badge12 silver badges24 bronze badges

1

Thêm phương pháp này

$('SelectorToPrint').printElement();

Đã trả lời ngày 7 tháng 6 năm 2021 lúc 12:44Jun 7, 2021 at 12:44Jun 7, 2021 at 12:44

Hasan_NaserHasan_NaserHasan_NaserHasan_Naser

4163 Huy hiệu bạc12 Huy hiệu Đồng3 silver badges12 bronze badges3 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();

Dharman ♦♦♦

28.1K21 Huy hiệu vàng75 Huy hiệu bạc127 Huy hiệu đồng21 gold badges75 silver badges127 bronze badges21 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:39Jul 5, 2021 at 16:39

GuestGuestGuestGuest

Huy hiệu 111 Đồng1 bronze badge1 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();

Đã trả lời ngày 11 tháng 12 năm 2018 lúc 12:26Dec 11, 2018 at 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();

Đã trả lời ngày 20 tháng 2 lúc 19:27Feb 20 at 19:27Feb 20 at 19:27

Eugen Mihailescueugen MihailescuEugen MihailescuEugen Mihailescu

3.3582 Huy hiệu vàng29 Huy hiệu bạc29 Huy hiệu đồng2 gold badges29 silver badges29 bronze badges2 gold badges29 silver badges29 bronze badges

Cách đơn giản nhất để làm điều đó là:

$('SelectorToPrint').printElement();

Đã trả lời ngày 14 tháng 4 năm 2021 lúc 19:35Apr 14, 2021 at 19:35Apr 14, 2021 at 19:35

Blaze612 ytblaze612 ytBlaze612 YTBlaze612 YT

4444 Huy hiệu bạc12 Huy hiệu đồng4 silver badges12 bronze badges4 silver badges12 bronze badges

$('SelectorToPrint').printElement();

Đã trả lời ngày 17 tháng 8 lúc 3:25Aug 17 at 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();

Pang

9.223146 Huy hiệu vàng85 Huy hiệu bạc118 Huy hiệu đồng146 gold badges85 silver badges118 bronze badges146 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:24Jan 27, 2017 at 2:24

1

Làm cách nào để in một phần nhất định của trang HTML?

Mã CSS cụ thể có thể được xác định trực tiếp trong tiêu đề HTML hoặc sử dụng tệp biểu định kiểu.Mã trên chứa mã nếu bạn muốn thêm mã CSS trực tiếp vào tiêu đề HTML.Lớp định nghĩa NoPrint SETS HIỂN THỊ: Không có, vì vậy nội dung sẽ được ẩn khi in trang.. The code above contains the code if you want to add the CSS code directly to the HTML header. The class definition noprint sets display:none, so the content will be hidden when printing the page.. The code above contains the code if you want to add the CSS code directly to the HTML header. The class definition noprint sets display:none, so the content will be hidden when printing the page.

Làm cách nào để in một phần nhất định của trang web?

Chỉ in văn bản bạn tô sáng trên một trang làm nổi bật văn bản và/hoặc hình ảnh bạn muốn in trên trang web.Bây giờ trong trình duyệt của bạn, hãy truy cập File> In hoặc chỉ đơn giản là sử dụng kết hợp bàn phím Ctrl + P.Màn hình in xuất hiện.Chọn máy in bạn muốn sử dụng.go to File > Print or simply use the Ctrl + P keyboard combination. The Print screen comes up. Select the Printer you want to use.go to File > Print or simply use the Ctrl + P keyboard combination. The Print screen comes up. Select the Printer you want to use.

Làm cách nào để xem một yếu tố cụ thể trong HTML?

Người dùng có thể sử dụng phương thức getEuityById () để truy cập phần tử HTML bằng ID.Nếu bất kỳ phần tử nào không tồn tại với ID được truyền vào phương thức getEuityByID, nó sẽ trả về giá trị null.Cú pháp: Tài liệu.use getElementById() method to access HTML element using the id. If any element doesn't exist with the passed id into the getElementById method, it returns the null value. Syntax: document.use getElementById() method to access HTML element using the id. If any element doesn't exist with the passed id into the getElementById method, it returns the null value. Syntax: document.

Lệnh để in trong HTML là gì?

print () mở hộp thoại in để in tài liệu hiện tại. Opens the print dialog to print the current document. Opens the print dialog to print the current document.