วิธีการพิมพ์หรือบันทึกปุ่มหน้าด้วย JavaScript

เรียนรู้วิธีสร้างปุ่มที่เปิดพิมพ์หรือบันทึกของเบราว์เซอร์ของคุณ หน้าต่างไฟล์พร้อมท์เมื่อคุณคลิกที่มัน

หากคุณต้องการพิมพ์หรือบันทึกหน้าบนเว็บไซต์ใดๆ คุณสามารถไปที่เบราว์เซอร์ของคุณ (โดยปกติอยู่ที่มุมบนซ้าย):

• คลิกที่ ไฟล์ → พิมพ์ → และคลิกปุ่ม บันทึก เพื่อบันทึกไฟล์เป็นเอกสาร PDF หรือพิมพ์ด้วยเครื่องพิมพ์ของคุณ
• พิมพ์/บันทึกทางลัด: cmd + p (Mac) / ctrl + p (Windows)

แต่ถ้าคุณต้องการให้ผู้ใช้พิมพ์หรือบันทึกหน้าได้ง่ายยิ่งขึ้น โดยให้ปุ่มพิมพ์หรือบันทึกไฟล์ซึ่งจะเปิดหน้าต่างพรอมต์การพิมพ์ทันทีในเบราว์เซอร์

ไม่มีปัญหา เรามาสร้างปุ่มที่มีชื่อคลาสที่เหมาะสมกันก่อน:

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

ทำให้โค้ดของคุณอ่านง่ายสำหรับทุกคน!

สำหรับสิ่งต่างๆ เช่น คลาส ตัวแปร และ ฟังก์ชัน โดยทั่วไป ควรใช้ชื่อที่ยาวและชัดเจนกว่าปกติเหมือนที่เราทำกับปุ่มด้านบน ตรงข้ามกับชื่อย่อ (โดยนัย) สั้นๆ เช่น btn-pos-d . ไม่มีใครชอบอ่านสิ่งนั้น

ตอนนี้มาทำให้ปุ่มโต้ตอบกับ JavaScript:

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

function printOrSave() {
  window.print()
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave)

ตอนนี้คุณสามารถใช้องค์ประกอบปุ่มนี้ซ้ำบนหน้าเว็บใดๆ ที่คุณต้องการให้ตัวเลือกการพิมพ์หรือบันทึกเอกสารอย่างรวดเร็วแก่ผู้ใช้ของคุณ

วิธีการทำงานของโค้ด

• ขั้นแรก เราเลือกปุ่มที่มี button-print-or-save-document คลาสและเก็บข้อมูลอ้างอิงใน const ตัวแปร (buttonPrintOrSaveDocument )
• จากนั้นเราก็ทำการประกาศฟังก์ชันที่มีชื่อ printOrSave() ที่รัน window.print เมธอดเมื่อถูกเรียก
• สุดท้าย เราตั้งค่าตัวฟังเหตุการณ์ด้วยสองอาร์กิวเมนต์:อาร์กิวเมนต์ที่รอ click เหตุการณ์บนองค์ประกอบปุ่มและอื่น ๆ เพื่อเรียก printOrSave ฟังก์ชัน.

ตรวจสอบรหัสสาธิต