Học cách tạo nút mở cửa sổ prompt in hoặc lưu file của trình duyệt khi click.
Nếu muốn in hoặc lưu trang trên bất kỳ website nào, vào trình duyệt (thường góc trên trái):
- Click File → Print → rồi click nút Save để lưu file PDF, hoặc in với máy in.
- Phím tắt In/Lưu: cmd + p (Mac) / ctrl + p (Windows).
Nhưng nếu muốn dễ dàng hơn cho user, cung cấp nút in/lưu file mở ngay cửa sổ Print prompt khi click?
Không vấn đề, trước tạo button với class name phù hợp:
<button class="button-print-or-save-document">Print or Save Document</button>Làm code dễ đọc cho mọi người!
Đối với classes, variables, và functions tốt hơn dùng tên dài, rõ ràng (explicit) như button trên. Thay vì tên ngắn, viết tắt (implicit) như btn-pos-d. Không ai thích đọc kiểu đó.
Bây giờ làm button tương tác với JavaScript:
const buttonPrintOrSaveDocument = document.querySelector( ".button-print-or-save-document" ) function printOrSave() { window.print() } buttonPrintOrSaveDocument.addEventListener("click", printOrSave)Bây giờ bạn có thể tái sử dụng button này trên bất kỳ trang nào muốn cung cấp tùy chọn in/lưu nhanh cho user.
Cách code hoạt động
- Chọn button với class
button-print-or-save-documentlưu tham chiếu trong biếnconst(buttonPrintOrSaveDocument). - Tạo named function declaration
printOrSave()thực thi phương thứcwindow.printkhi gọi. - Thiết lập event listener với hai tham số: lắng nghe event
clicktrên button, gọi functionprintOrSave.