একটি বাটন তৈরি করার পদ্ধতি শিখুন যা ক্লিক করলে আপনার ব্রাউজারের প্রিন্ট বা সেভ ফাইল উইন্ডো প্রম্পট খুলবে।
আপনি যদি যেকোনো ওয়েবসাইটে একটি পেজ প্রিন্ট বা সেভ করতে চান, আপনি আপনার ব্রাউজারে যেতে পারেন (সাধারণত উপরের বাম কোণে):
- File → Print → ক্লিক করুন এবং Save বাটনে ক্লিক করে ফাইলটি 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ফাংশন কল করতে।
ডেমো কোড চেক করুন।
