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[]
- Google Chrome
- trình duyệt web IE
- hộp cứu hỏa
- Ô-pê-ra
- 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 title 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