Hướng dẫn save html page on button click - lưu trang html khi nhấp vào nút

Tìm hiểu cách tạo một nút mở trình duyệt của bạn in hoặc lưu dấu nhắc cửa sổ tệp khi bạn nhấp vào nó.print or save file window prompt when you click on it.

Nếu bạn muốn in hoặc lưu một trang trên bất kỳ trang web 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 nó bằng máy in của bạn.File → Print → and either click the Save button to save the file as a PDF document, or print it with your printer.
• In / Lưu phím tắt: CMD + P (Mac) / Ctrl + P (Windows). cmd + p (Mac) / ctrl + p (Windows).

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

Không có vấn đề gì, trước tiên hãy để Let tạo một nút có tên lớp phù hợp:

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

Làm cho mã của bạn dễ đọc cho tất cả mọi người!

Đối với những thứ như các lớp, biến và chức năng, nó thường tốt hơn để sử dụng các tên dài hơn, rõ ràng như chúng ta làm trên 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 điều đó.classes, variables, and functions it’s generally better to use longer, explicit names as we do on the button above. As opposed to short, abbreviated (implicit) names, like btn-pos-d. Nobody likes reading that.

Bây giờ, hãy để nút tạo 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)

Bây giờ 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 hoặc lưu tài liệu nhanh cho người dùng.

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

• Đầu tiên, chúng tôi chọn nút có lớp button-print-or-save-document và lưu trữ tham chiếu đến nó trong biến const (buttonPrintOrSaveDocument).
• Sau đó, chúng tôi thực hiện một khai báo chức năng được đặt tên printOrSave() thực thi phương thức

  download html content
  
  
  

  0 khi nó được gọi.
• Cuối cùng, chúng tôi đã thiết lập một trình nghe sự kiện với hai đối số: một đối số lắng nghe sự kiện

  download html content
  
  
  

  1 trên phần tử nút và một đối số để gọi hàm

  download html content
  
  
  

  2.

Kiểm tra mã demo.