Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách tạo nút in hoặc lưu trang bằng JavaScript

Tìm hiểu cách tạo nút để mở in hoặc lưu trên trình duyệt của bạn cửa sổ tệp tin nhắc nhở khi bạn nhấp vào nó.

Nếu bạn muốn in hoặc lưu một trang trên bất kỳ trang web nhất định nào, bạn có thể truy cập trình duyệt của mình (thường là góc trên cùng bên trái):

  • Nhấp vào Tệp → In → và nhấp vào nút Lưu để lưu tệp dưới dạng tài liệu PDF hoặc in bằng máy in của bạn.
  • Phím tắt In / Lưu: cmd + p (Mac) / ctrl + p (Windows).

Nhưng điều gì sẽ xảy ra nếu bạn muốn giúp người dùng của mình in hoặc lưu một trang thậm chí dễ dàng hơn bằng cách cung cấp cho họ nút in hoặc lưu tệp để mở ngay cửa sổ nhắc in của trình duyệt khi nhấp chuột?

Không sao, trước tiên hãy tạo một nút có tên lớp phù hợp:

<button class="button-print-or-save-document">Print or Save Document</button>

Làm cho mã của bạn dễ đọc đối với mọi người!

Đối với những thứ như lớp, biến, và chức năng nói chung tốt hơn là sử dụng các tên dài hơn, rõ ràng như chúng ta làm ở nút ở trên. Trái ngược với các tên ngắn, viết tắt (ẩn ý), như btn-pos-d . Không ai thích đọc nó.

Bây giờ, hãy làm cho nút tương tác với JavaScript:

const buttonPrintOrSaveDocument = document.querySelector(
  ".button-print-or-save-document"
)

function printOrSave() {
  window.print()
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave)

Giờ đây, bạn có thể sử dụng lại phần tử nút này trên bất kỳ trang web nào mà bạn muốn cung cấp tùy chọn in nhanh hoặc lưu tài liệu cho người dùng của mình.

Cách hoạt động của mã

  • Đầu tiên, chúng tôi chọn nút có button-print-or-save-document và lưu trữ một tham chiếu đến nó trong một const biến (buttonPrintOrSaveDocument ).
  • Sau đó, chúng tôi thực hiện khai báo hàm có tên printOrSave() thực thi window.print khi nó được gọi.
  • Cuối cùng, chúng tôi thiết lập một trình xử lý sự kiện với hai đối số:một đối số lắng nghe click sự kiện trên phần tử nút và một sự kiện khác để gọi printOrSave chức năng.

Kiểm tra mã demo.