Làm cách nào để in giá trị trong HTML từ JavaScript?

jQuery di chuyển nhiều giá trị lựa chọn từ danh sách đa lựa chọn này sang danh sách đa lựa chọn khác Làm cách nào để hiển thị các mục danh sách tùy chọn ẩn bằng jQuery?

Trong phần này, chúng ta sẽ thảo luận về phương thức print() trong ngôn ngữ JavaScript. Phương thức print() được sử dụng để in các nội dung đang hiển thị như trang web, văn bản, hình ảnh, v.v. , trên màn hình máy tính. Khi chúng ta sử dụng phương thức print() trong JavaScript và thực thi mã, nó sẽ mở hộp thoại in cho phép người dùng hoặc lập trình viên chọn một tùy chọn thích hợp để in nội dung hiện tại của cửa sổ

cú pháp

Cú pháp sau đây được sử dụng để in nội dung hiện tại của cửa sổ

Trong cú pháp trên, chúng tôi sử dụng cửa sổ. phương thức print() in nội dung đang hiển thị của màn hình cửa sổ

Thông số. Nó không chứa bất kỳ tham số nào

trả lại. Cửa sổ. phương thức print() không trả về bất cứ thứ gì

Trình duyệt được hỗ trợ của phương thức print()

Sau đây là các trình duyệt hỗ trợ window. phương thức in()

1. Google Chrome
2. trình duyệt web IE
3. hộp cứu hỏa
4. Ô-pê-ra
5. Cuộc đi săn

ví dụ 1. Chương trình in trang web bằng phương thức print()

Trong chương trình này, chúng tôi đang sử dụng một cửa sổ. phương thức print() in nội dung hiển thị hiện tại trên màn hình cửa sổ

in. html

Khi chúng tôi thực thi mã lập trình trên trên bất kỳ trình duyệt nào, nó sẽ hiển thị hình ảnh bên dưới

Trong hình trên có nút Print. Bây giờ chúng ta bấm vào nút Print, nó sẽ mở ra hộp thoại in với nội dung trực quan hiện tại của màn hình cửa sổ, như hình bên dưới

ví dụ 2. Chương trình in Phiếu đăng ký học sinh bằng phương thức print()

Trong chương trình này, chúng tôi tạo một mẫu đăng ký sinh viên và sau đó in nó bằng phương thức window,print()

Sinh viên. html

Khi chúng tôi thực thi mã lập trình trên trên bất kỳ trình duyệt nào, nó sẽ hiển thị hình ảnh bên dưới

Bây giờ chúng tôi điền vào tất cả các chi tiết của mẫu đăng ký sinh viên và nhấp vào nút In, hiển thị hình ảnh bên dưới

Sau khi nhấp vào nút In, nó hiển thị các thao tác khác nhau của cửa sổ. phương pháp in. Khi chúng tôi đã hoàn tất tất cả các cài đặt trong hộp thoại In, hãy nhấp vào nút Lưu để lưu tệp hoặc trang trong hệ thống của bạn

Giải thích mã. Trong chương trình trên ta đã tạo một form đăng ký học sinh, form này có 2 nút Reset và nút Print. Nút Reset dùng để đặt lại nội dung, nút Print dùng để in nội dung hiển thị. Khi ta click vào nút Print thì một hàm onclick sẽ kích hoạt và gọi hàm PrintFun(). Bây giờ chức năng PrintFun() được thực thi có chứa cửa sổ. Phương thức print() để in nội dung hiển thị ra màn hình cửa sổ

Phần kết luận

Chúng ta đã học về phương thức print() trong JavaScript để in nội dung của màn hình cửa sổ. Trường hợp nội dung của màn hình cửa sổ có thể là văn bản, hình ảnh, quảng cáo, v.v. Hơn nữa, khi một phương thức print() được gọi trong JavaScript, nó sẽ mở hộp thoại in. Nhờ đó, người dùng hoặc lập trình viên có thể chọn tùy chọn phù hợp để in nội dung hiển thị trên màn hình cửa sổ

Trong hướng dẫn này, chúng ta sẽ xem xét một số cách để in một trang bằng JavaScript và so sánh nó để hiểu cách nào phù hợp trong ngữ cảnh nhất định

Hãy giới thiệu ngắn gọn các phương pháp

Sử dụng Phương thức in cửa sổ ()

print() là một phương thức trên đối tượng cửa sổ. Người dùng có thể gọi phương thức này để in tài liệu của họ trên cửa sổ. Phương thức in in dữ liệu của cửa sổ hiện tại. Người dùng nhận được một hộp thoại in nơi họ có thể chọn các tùy chọn in cần thiết

Phương pháp in in hình ảnh, đồ họa, văn bản, số, tính toán, v.v. Phương thức này bị kẹt nếu quá trình tải tài liệu không hoàn tất khi phương thức in được gọi. Print() là một đối tượng toàn cầu

cú pháp

Người dùng có thể làm theo cú pháp dưới đây để sử dụng phương pháp này

window.print();
print();

Ở đây, phương thức Print không có tham số và không có giá trị trả về

Ví dụ

Khi người dùng nhấp vào nút, cửa sổ. phương thức print() được gọi và người dùng nhận được các tùy chọn in cho toàn bộ tài liệu trong cửa sổ hiện tại

   
This is the print content.
   Click to Print
   

Sử dụng thư viện in

Ở đây, chúng tôi đang thêm tệp thư viện JavaScript in vào HTML của chúng tôi. Hàm tùy chỉnh bên trong tệp này được gọi để in tài liệu

cú pháp

Người dùng có thể làm theo cú pháp dưới đây để sử dụng thư viện này

printJS('id','html');

Ở đây, các tệp js và CSS bắt buộc được bao gồm bằng hai cú pháp đầu tiên và phương thức in tùy chỉnh được gọi trong cú pháp thứ hai

Thông số

• id − Giá trị thuộc tính id của nội dung HTML cần in

• html − Loại nội dung in. Nó có thể là hình ảnh hoặc tập tin

Ví dụ

Ở đây, chúng tôi đã tải các thư viện cần thiết. Sau khi người dùng nhấp vào nút, phương thức tùy chỉnh trong thư viện được gọi với id nội dung in làm tham số đầu tiên. Cửa sổ in được mở cho người dùng

   
   
   


   
Print a page using Print.js library
   

      
Print content A
      
Print content B




      
Print content C
   

   

      
Click this button
      Print Page
   

   
   

Sử dụng in CSS

Ở đây chúng tôi sử dụng tùy chọn in phương tiện CSS để in nội dung cần thiết trong tài liệu

cú pháp

Người dùng có thể làm theo cú pháp dưới đây để sử dụng phương pháp này

@media only print
{
   body{visibility: hidden;}
   .printId{visibility: visible;}
}
print();

Ở đây, phương pháp in chung hoạt động dựa trên truy vấn phương tiện in

Ví dụ

Ở đây, chúng tôi có nội dung với id được đặt trong dom. Chúng tôi cung cấp id này trong truy vấn phương tiện in để làm cho nó hiển thị. Đồng thời, nội dung cơ thể khác được đặt thành ẩn. Khi người dùng nhấp vào nút, nội dung được đặt thành hiển thị trong truy vấn phương tiện sẽ được in

   
   

      Print a page using
      CSS print media query
   
   

      
Print One
      
Print Two
      
Print Three
   

   

      
Click this button
      Print Page
   

   
   

Trong hướng dẫn này, chúng ta đã thảo luận ba cách để in một trang. Từ cửa sổ đó. print() là một phương thức tích hợp sẵn và rất dễ sử dụng. Khi bao gồm thư viện tăng tải trang. Truy vấn phương tiện sẽ tốt hơn khi chúng ta cần in một phần cụ thể từ tài liệu

Làm cách nào để hiển thị giá trị từ JavaScript sang HTML?

Làm cách nào để in giá trị của biến trong JavaScript?

Làm cách nào để sử dụng giá trị JavaScript trong HTML?

Làm cách nào để hiển thị văn bản trong HTML bằng JavaScript?