HTML to PDF: HTML কোড থেকে PDF বানানোর ফ্রি টুল (বাংলা সাপোর্টসহ)

ইনভয়েস, রিজিউমে, নোটিশ বা ওয়েব পেজের নকশা HTML কোডে বানানো আছে, কিন্তু সেটি PDF আকারে পাঠাতে বা ছাপতে হবে? নিচের ফ্রি টুলে কোড পেস্ট করুন, লাইভ প্রিভিউতে দেখে নিন, তারপর এক ক্লিকে PDF নামিয়ে নিন। বাংলা লেখা, টেবিল ও রঙিন বক্স প্রিভিউতে দেখা যায়। আপনার কোড কোনো সার্ভারে পাঠানো হয় না।

টুলটি ব্যবহারের গাইড (৬ ধাপ)

টুলটি ব্যবহার করতে অ্যাকাউন্ট খোলা বা সফটওয়্যার ইনস্টল করার দরকার নেই। কম্পিউটার ও ফোন দুটোর আধুনিক ব্রাউজারেই চলে, তবে কোড লেখা ও দেখার জন্য কম্পিউটারে সুবিধা বেশি।

1. কোড বসান। “আপনার কোড বসান” ঘরে HTML পেস্ট করুন। কোড না থাকলে “নমুনা বসিয়ে দেখুন” বাটনে চাপ দিলে একটি রিপোর্টের নমুনা বসে যায়, সেটি এডিট করে নিজের লেখা দিতে পারেন। ঘরের নিচে অক্ষর, লাইন ও আনুমানিক পৃষ্ঠা সংখ্যা দেখায়।
2. পেজের মাপ ঠিক করুন। A4 বা Letter। বাংলাদেশে সাধারণত A4 লাগে।
3. পেজ ভাগের ধরন নিন। “পৃষ্ঠায় ভাগ হবে” অথবা “একটাই লম্বা পেজ”।
4. মার্জিন বাছুন। কিছু না, স্বাভাবিক বা প্রশস্ত।
5. লাইভ প্রিভিউ দেখে নিন। কোড লেখার প্রায় সঙ্গে সঙ্গেই নিচে পেজের নমুনা ফুটে ওঠে। কোথাও গরমিল দেখলে কোড ঠিক করুন।
6. “কোড থেকে পিডিএফ বানান” চাপুন। প্রগ্রেস বারে কাজ এগোতে দেখবেন। শেষ হলে ফাইলের নাম, আকার ও পৃষ্ঠা সংখ্যা দেখিয়ে “ডাউনলোড করুন” বাটন আসে। ফাইলের নাম আসে আপনার কোডের <title> থেকে, না থাকলে প্রথম শিরোনাম (h1 থেকে h3) থেকে, তা-ও না থাকলে html-document নামে।

কোড পেস্টের আগে নিরাপত্তার কথা

PDF বানানোর জন্য JavaScript দরকারও হয় না। এই টুল স্থির HTML ও CSS-এর জন্য, চলমান ওয়েব অ্যাপের জন্য নয়। কোডে স্ক্রিপ্ট দিয়ে তৈরি হওয়া অংশ থাকলে চূড়ান্ত তৈরি করা HTML পেস্ট করা ভালো।

টুলটি ভেতরে কীভাবে কাজ করে

কাজের ধরন জানা থাকলে ফলাফল নিয়ে অবাক হতে হয় না। টুলটি তিন ধাপে কাজ করে।

1. কোড দেখায়: আপনার কোড একটি আলাদা ফ্রেমে ব্রাউজারের নিজস্ব পদ্ধতিতে সাজানো হয়। ফ্রেমের ডিফল্ট ফন্ট বাংলা-সমর্থিত (Hind Siliguri, না পেলে Noto Sans Bengali), আর ফ্রেমটি আলাদা বলে আপনার ওয়েবসাইটের থিমের CSS এতে ঢোকে না। ফ্রেমের প্রস্থ সবসময় নির্বাচিত কাগজের প্রস্থের সমান, অর্থাৎ A4-এ ৭৯৪ পিক্সেল, Letter-এ ৮১৬ পিক্সেল।
2. ছবি তোলে: রেন্ডার হওয়া পুরো কনটেন্ট html2canvas নামের লাইব্রেরি দিয়ে একটি বড় ছবি হিসেবে ধরা হয়।
3. পৃষ্ঠায় বসায়: ছবিটিকে সমান ভাগে কেটে প্রতিটি অংশ একটি পৃষ্ঠায় বসানো হয় এবং pdf-lib দিয়ে PDF তৈরি হয়।

অপশনগুলো কী করে

“একটাই লম্বা পেজ” অনলাইনে দেখার বা স্ক্রিনে শেয়ারের জন্য সুবিধাজনক, কারণ মাঝখানে পেজ কাটা পড়ে না। কিন্তু ছাপতে চাইলে প্রচলিত A4 পৃষ্ঠার “পৃষ্ঠায় ভাগ হবে” অপশনই ঠিক।

পৃষ্ঠা ভাগ ও মার্জিন: যা জানা জরুরি

এই অংশটি অনেকে খেয়াল করেন না, তাই আলাদা করে বলছি।

• পৃষ্ঠা কাটা হয় সমান উচ্চতায়: টুল পুরো কনটেন্টের ছবিকে সমান কয়েক ভাগে কাটে। ফলে কোনো লাইন বা টেবিলের সারি পৃষ্ঠার সীমানায় পড়লে সেটি দুই পৃষ্ঠায় অর্ধেক অর্ধেক হয়ে যেতে পারে।
• CSS-এর page-break কাজ করে না: আপনি কোডে page-break-before বা break-inside দিলেও টুল সেটি মানে না।
• মার্জিন সব পৃষ্ঠায় নয়: মার্জিন আসলে পুরো কনটেন্টের চারপাশে একবার বসে। তাই প্রথম পৃষ্ঠার ওপরে ও শেষ পৃষ্ঠার নিচে ফাঁকা থাকে, কিন্তু মাঝের পৃষ্ঠাগুলোর ওপর-নিচে আলাদা মার্জিন থাকে না। পাশের মার্জিন সব পৃষ্ঠাতেই থাকে।
• পৃষ্ঠার নিচে ফাঁকা থাকতে পারে: প্রতিটি অংশ পৃষ্ঠার ওপর থেকে বসে, তাই নিচে কিছুটা ফাঁকা থাকতে পারে।

এর সহজ সমাধান: এক-দুই পৃষ্ঠার ছোট ডকুমেন্টে এই সমস্যা প্রায় চোখে পড়ে না। বড় ডকুমেন্টে প্রিভিউ আগে ভালো করে দেখে নিন এবং যেখানে লাইন কাটা পড়ছে সেখানে কনটেন্ট একটু সরিয়ে (যেমন একটি খালি লাইন বা ফাঁক দিয়ে) পৃষ্ঠার সীমানা এড়িয়ে যান। পৃষ্ঠার সীমানা নিখুঁত লাগলে নিচের “Print to PDF” পদ্ধতি দেখুন।

ছবি, ফন্ট ও CSS

ছবি

কোডে বাইরের ওয়েবসাইটের ছবির লিংক থাকলে সেই সাইটের নিরাপত্তা সেটিংয়ের কারণে ছবি আসতে না-ও পারে। এ জন্যই টুলে বলা আছে ছবি base64 আকারে সরাসরি কোডে বসিয়ে দিতে। এতে ছবি কোডের অংশ হয়ে যায় এবং কোথাও থেকে আনতে হয় না। তবে বড় ছবি বেশি কোড বানায়, তাই ছবি ছোট করে নিন।

ফন্ট

কোনো ফন্ট না বললে টুল Hind Siliguri ব্যবহার করে, যা বাংলা যুক্তাক্ষর ভালোভাবে দেখায়। নিজের ফন্ট চাইলে কোডে font-family দিতে পারেন, কিন্তু সেই ফন্ট ব্রাউজারে লোড হতে হবে। ফন্ট না পেলে ব্রাউজার অন্য ফন্টে ফিরে যায় এবং ফলাফল আলাদা দেখাতে পারে।

CSS

সবচেয়ে নিরাপদ উপায় হলো কোডের ভেতরেই <style> ট্যাগে বা style="..." অ্যাট্রিবিউটে CSS দেওয়া। বাইরের CSS ফাইলের লিংক দিলে সেটি লোড না-ও হতে পারে। জটিল প্রভাব, যেমন কিছু ফিল্টার বা অস্বাভাবিক গ্র্যাডিয়েন্ট, ছবি তোলার সময় ঠিক নাও আসতে পারে।

একটি ছোট ইনভয়েসের উদাহরণ

নিচের কোডটি লেখার ঘরে পেস্ট করলে একটি সাধারণ ইনভয়েস পাবেন। নাম ও অঙ্ক বদলে নিজের মতো ব্যবহার করতে পারেন।

<title>ইনভয়েস-০০১</title>
<div style="font-family:sans-serif;color:#1f2937">
  <h2 style="color:#1e88e5">ইনভয়েস</h2>
  <p>ক্লায়েন্ট: রহিম আহমেদ</p>
  <table style="width:100%;border-collapse:collapse">
    <tr style="background:#e0f2fe">
      <th style="border:1px solid #cbd5e1;padding:8px">সেবা</th>
      <th style="border:1px solid #cbd5e1;padding:8px">টাকা</th>
    </tr>
    <tr>
      <td style="border:1px solid #cbd5e1;padding:8px">লোগো ডিজাইন</td>
      <td style="border:1px solid #cbd5e1;padding:8px">৩০০০</td>
    </tr>
  </table>
</div>

এখানে প্রথম লাইনের <title> থেকে ফাইলের নাম “ইনভয়েস-০০১.pdf” হবে। টেবিলের ঘরে প্রতিটি সীমারেখা আলাদা করে দেওয়া হয়েছে, কারণ ছবি তোলার সময় স্পষ্ট ও সরল CSS সবচেয়ে ভালো আসে। সব বদলানোর পর প্রিভিউতে টেবিল ঠিকঠাক দেখা গেলে PDF বানিয়ে নিন।

কখন এই টুল কাজে লাগে

ফ্রিল্যান্সারদের ইনভয়েস ও প্রস্তাব

যাঁরা নিজেদের ইনভয়েস বা প্রজেক্ট প্রস্তাবের টেমপ্লেট HTML-এ রাখেন, তাঁরা ক্লায়েন্টের নাম ও অঙ্ক বদলে দ্রুত PDF বানিয়ে ফেলতে পারেন।

রিজিউমে ও আবেদনপত্র

HTML-এ সাজানো রিজিউমে বা সরল আবেদনপত্র PDF করে চাকরির আবেদনে জমা দেওয়া যায়। তবে অনেক নিয়োগকর্তার সিস্টেম লেখা পড়ে নিতে পারে এমন PDF চায়। এই টুলের PDF ছবি-ভিত্তিক হওয়ায় সে ক্ষেত্রে নিচের Print to PDF পদ্ধতি ভালো।

ইমেইল ও নোটিশের নকশা যাচাই

ইমেইল টেমপ্লেট বা নোটিশ পাঠানোর আগে PDF আকারে দেখে ক্লায়েন্ট বা সহকর্মীর অনুমোদন নেওয়া যায়।

ওয়েব ডিজাইনের প্রোটোটাইপ দেখানো

ওয়েবসাইটের একটি অংশের নকশা কোডে বানিয়ে PDF করে ক্লায়েন্টকে দেখানো যায়, যাতে তাঁকে লাইভ সাইটে নিতে না হয়।

শিক্ষার্থীদের HTML অ্যাসাইনমেন্ট

HTML শেখার সময় লেখা পেজ PDF করে শিক্ষকের কাছে জমা দেওয়া যায়, যেখানে শুধু PDF নেওয়া হয়।

নিজের কনটেন্ট সংরক্ষণ

নিজের লেখা HTML পেজ বা রিপোর্ট স্থির PDF হিসেবে রেখে দেওয়ার জন্যও কাজে লাগে।

সীমাবদ্ধতা যা আগে জানা ভালো

• শুধু কোড পেস্ট: এই টুল ওয়েব পেজের লিংক (URL) বা HTML ফাইল আপলোড নেয় না, কেবল পেস্ট করা কোড নেয়। কোনো লিংকের পেজকে PDF করতে চাইলে ব্রাউজারের Print অপশন ব্যবহার করুন।
• লেখা সিলেক্ট করা যায় না, লিংক ক্লিক হয় না: আউটপুট ছবি-ভিত্তিক। এতে স্ক্রিন রিডারও পড়তে পারে না।
• পৃষ্ঠার সীমানায় লাইন কাটা পড়তে পারে: আগের অংশে ব্যাখ্যা করা হয়েছে।
• জটিল CSS ও JavaScript: চলমান চার্ট, অ্যানিমেশন বা অস্বাভাবিক CSS প্রভাব PDF-এ ঠিক নাও আসতে পারে।
• বাইরের সম্পদ: বাইরের ছবি, ফন্ট বা CSS লোড না হলে সেই অংশ বাদ যায় বা আলাদা দেখায়।
• খুব লম্বা কনটেন্ট: অনেক লম্বা কনটেন্টে ছবির আকার বড় হয় এবং ফোনে সময় বেশি লাগে বা মেমরি কম পড়তে পারে। সে ক্ষেত্রে কনটেন্ট কয়েক ভাগে ভাগ করে PDF বানান।
• ফাইলের আকার: ছবি-ভিত্তিক পৃষ্ঠা বলে সাধারণ লেখা-ভিত্তিক PDF-এর চেয়ে আকার বেশি হতে পারে।
• সংরক্ষণ হয় না: পেজ রিফ্রেশ করলে বা “নতুন কোড শুরু করুন” চাপলে কোড মুছে যায়। গুরুত্বপূর্ণ কোড আলাদা ফাইলে রেখে দিন।

ব্রাউজারের Print to PDF নাকি এই টুল

Chrome বা Edge-এর মতো ব্রাউজারেও HTML ফাইল খুলে Ctrl + P চেপে গন্তব্য হিসেবে “Save as PDF” বেছে নিয়ে PDF বানানো যায়। এ পদ্ধতিতে ফলাফল সাধারণত লেখা-ভিত্তিক হয়, মানে লেখা সিলেক্ট করা যায়, লিংক চলে এবং পৃষ্ঠার সীমানা ব্রাউজার নিজে বুঝে ঠিক করে। দুই পদ্ধতির তুলনা নিচে।

সহজ হিসাব: ছোট ও দ্রুত কাজ হলে এই টুল, আর নিখুঁত পৃষ্ঠা ভাগ বা সিলেক্ট করা যায় এমন লেখা লাগলে ব্রাউজারের Print to PDF।

কাজের কয়েকটি টিপস

• কোড আলাদা ফাইলে রাখুন। Notepad বা কোড এডিটরে লিখে পুরোটা কপি করে পেস্ট করুন।
• প্রথমে ছোট অংশ দিয়ে পরীক্ষা করুন। পুরো ডকুমেন্টের আগে একটি টেবিল বা শিরোনামের প্রিভিউ দেখলে ভুল তাড়াতাড়ি ধরা পড়ে।
• <title> দিন। ফাইলের নাম ঠিকঠাক আসার সবচেয়ে সহজ উপায় এটি।
• সরল CSS রাখুন। সরল সীমারেখা, সাধারণ রঙ ও স্পষ্ট প্যাডিং সবচেয়ে ভালো আসে।
• ছবি ছোট করুন। base64 কোড বড় হলে পেস্ট ও রেন্ডার ধীর হয়।
• PDF খুলে দেখুন। ডাউনলোডের পর প্রতিটি পৃষ্ঠা, বিশেষ করে সীমানার কাছের অংশ, একবার দেখে নিন।

সাধারণ প্রশ্ন (FAQ)

শেষ কথা

HTML কোড থেকে দ্রুত PDF দরকার হলে এই টুল কাজের। কোড পেস্ট করুন, প্রিভিউ দেখে মাপ ও মার্জিন ঠিক করুন, আর এক ক্লিকে ফাইল নামান। কিন্তু মনে রাখবেন, ফলাফল ছবি-ভিত্তিক PDF এবং পৃষ্ঠার সীমানায় লাইন কাটা পড়তে পারে। নিখুঁত পৃষ্ঠা বা সিলেক্ট করা যায় এমন লেখা লাগলে ব্রাউজারের Print to PDF ব্যবহার করুন। আর অচেনা কোড কখনো পেস্ট করবেন না। টুল নিয়ে কোনো সমস্যা বা পরামর্শ থাকলে নিচের লিংকে সরাসরি জানান।

কপিরাইট ও ব্যবহারের নিয়ম

জোনাইদুল ইসলাম

CEO, MyDailyEarn.com

MyDailyEarn-এর প্রতিষ্ঠাতা ও CEO। বাংলাভাষী ব্যবহারকারীদের জন্য সহজ, ফ্রি অনলাইন টুল ও ডিজিটাল গাইড তৈরি করেন। টুল নিয়ে প্রশ্ন বা মতামত থাকলে সরাসরি যোগাযোগ করুন।

Facebook-এ যোগাযোগ করুন