printDiv (divId) : যে কোনও পৃষ্ঠায় কোনও মুদ্রণের একটি সাধারণ সমাধান।
আমার অনুরূপ সমস্যা ছিল তবে আমি চেয়েছিলাম (ক) পুরো পৃষ্ঠাটি মুদ্রণ করতে সক্ষম হব, বা (খ) কয়েকটি নির্দিষ্ট ক্ষেত্রের যে কোনও একটি মুদ্রণ করতে সক্ষম হব। আমার সমাধান, উপরের অনেকটির জন্য ধন্যবাদ, আপনাকে মুদ্রণের জন্য কোনও ডিভ অবজেক্ট নির্দিষ্ট করার অনুমতি দেয়।
এই সমাধানের মূলটি হ'ল প্রিন্ট মিডিয়া স্টাইল শীটে একটি উপযুক্ত নিয়ম যুক্ত করা যাতে অনুরোধ করা ডিভ (এবং এর সামগ্রীগুলি) মুদ্রণ করা যায়।
প্রথমে সমস্ত কিছু দমনের জন্য প্রয়োজনীয় মুদ্রণ সিএসএস তৈরি করুন (তবে যে উপাদানটি আপনি মুদ্রণ করতে চান তা নির্দিষ্ট নিয়ম ছাড়াই)।
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
মনে রাখবেন যে আমি নতুন শ্রেণীর বিধি যুক্ত করেছি:
- নোপ্রিন্টেরিয়া আপনাকে উপাদান এবং ব্লক উভয় অংশের মধ্যে উপাদানগুলির মুদ্রণ দমন করতে দেয়।
- নোপ্রিন্ট কনটেন্ট আপনাকে আপনার ডিভের মধ্যে উপাদানগুলির মুদ্রণ দমন করতে দেয় - সামগ্রীটি দমন করা হয় এবং বরাদ্দকৃত অঞ্চলটি খালি ছেড়ে যায়।
- মুদ্রণ আপনাকে এমন আইটেম রাখতে দেয় যা মুদ্রিত সংস্করণে প্রদর্শিত হয় তবে স্ক্রিন পৃষ্ঠায় নয়। এগুলি সাধারণত স্ক্রিন শৈলীর জন্য "প্রদর্শন: কিছুই নয়" থাকবে।
তারপরে তিনটি জাভাস্ক্রিপ্ট ফাংশন sertোকান। প্রথমটি প্রিন্ট মিডিয়া স্টাইল শীটটি চালু এবং বন্ধ করে দেয়।
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
দ্বিতীয়টি আসল কাজ করে এবং তৃতীয়টি পরে পরিষ্কার হয়। দ্বিতীয় (প্রিন্টডিভ) প্রিন্ট মিডিয়া স্টাইল শীটটি সক্রিয় করে, তার পরে কাঙ্ক্ষিত ডিভটি প্রিন্ট করার অনুমতি দেওয়ার জন্য একটি নতুন নিয়ম সংযোজন করে, মুদ্রণ জারি করে, এবং তারপরে চূড়ান্ত গৃহকর্মের আগে একটি বিলম্ব যোগ করে (অন্যথায় মুদ্রণটি প্রকৃতপক্ষে শৈলীর পুনরায় সেট করা যেতে পারে) সম্পন্ন.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
চূড়ান্ত ফাংশনগুলি যুক্ত করা নিয়ম মুছে ফেলে এবং মুদ্রণ শৈলীটিকে আবার অক্ষম করে দেয় যাতে পুরো পৃষ্ঠাটি মুদ্রণ করা যায়।
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
কেবলমাত্র অন্য কাজটি হ'ল আপনার অনলোড লোড প্রসেসিংয়ে একটি লাইন যুক্ত করা যাতে মুদ্রণ শৈলীটি প্রাথমিকভাবে অক্ষম হয়ে যায় যার মাধ্যমে পুরো পৃষ্ঠা মুদ্রণের অনুমতি দেয়।
<body onLoad='disableSheet(0,true)'>
তারপরে, আপনার নথির যে কোনও জায়গা থেকে, আপনি একটি ডিভ মুদ্রণ করতে পারেন। কেবল একটি বোতাম বা যে কোনও কিছুই থেকে প্রিন্টডিভ ("উপকারী") জারি করুন।
এই পদ্ধতির জন্য একটি বড় প্লাস এটি কোনও পৃষ্ঠার মধ্য থেকে নির্বাচিত সামগ্রী মুদ্রণের জন্য একটি সাধারণ সমাধান সরবরাহ করে। এটি মুদ্রিত উপাদানগুলির জন্য বিদ্যমান শৈলীর ব্যবহারের অনুমতি দেয় - এতে থাকা ডিভ অন্তর্ভুক্ত।
দ্রষ্টব্য: আমার বাস্তবায়নের ক্ষেত্রে এটি অবশ্যই প্রথম স্টাইল শীট হতে হবে। শিটের রেফারেন্স (0) টি যথাযথ শীট সংখ্যায় পরিবর্তন করুন যদি আপনার এটি পরে শিট ক্রম অনুসারে তৈরি করতে হয়।