আমি purgtory101 এর উত্তর ব্যবহার করেছি তবে সমস্ত রঙ (আইকন, ব্যাকগ্রাউন্ড, পাঠ্যের রং ইত্যাদি ...) রাখতে সমস্যা হয়েছে, বিশেষত সিএসএস স্টাইলশিটগুলি লাইব্রেরিতে ব্যবহার করা যাবে না যা গতিশীলভাবে ডিওএম উপাদানটির রঙ পরিবর্তন করে। সুতরাং এখানে একটি স্ক্রিপ্ট রয়েছে যা মুদ্রণের আগে উপাদানগুলির শৈলীর ( background-colour
এবং colour
) পরিবর্তন করে এবং মুদ্রণ শেষ হওয়ার পরে শৈলীগুলি সাফ করে। @media print
স্টাইলশিটে প্রচুর সিএসএস লেখা এড়াতে দরকারী কারণ এটি পৃষ্ঠার কাঠামো যা কাজ করে works
স্ক্রিপ্টের একটি অংশ রয়েছে যা ফন্টআউভিজ আইকনগুলিকে রঙিন রাখার জন্য বিশেষভাবে তৈরি করা হয়েছে (বা :before
রঙিন সামগ্রী অন্তর্ভুক্ত করতে নির্বাচক ব্যবহার করে এমন কোনও উপাদান )।
স্ক্রিপ্টটি কার্যকর অবস্থায় দেখছে জেএসফিডাল
সামঞ্জস্যতা: ক্রোমে কাজ করে, আমি অন্যান্য ব্রাউজারগুলিকে পরীক্ষা করিনি।
function setColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var eltBackground = $(elements[i]).css('background-color');
var eltColor = $(elements[i]).css('color');
var elementStyle = elements[i].style;
if (eltBackground) {
elementStyle.oldBackgroundColor = {
value: elementStyle.backgroundColor,
importance: elementStyle.getPropertyPriority('background-color'),
};
elementStyle.setProperty('background-color', eltBackground, 'important');
}
if (eltColor) {
elementStyle.oldColor = {
value: elementStyle.color,
importance: elementStyle.getPropertyPriority('color'),
};
elementStyle.setProperty('color', eltColor, 'important');
}
}
}
function resetColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var elementStyle = elements[i].style;
if (elementStyle.oldBackgroundColor) {
elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
delete elementStyle.oldBackgroundColor;
} else {
elementStyle.setProperty('background-color', '', '');
}
if (elementStyle.oldColor) {
elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
delete elementStyle.oldColor;
} else {
elementStyle.setProperty('color', '', '');
}
}
}
function setIconColors(icons) {
var css = '';
$(icons).each(function (k, elt) {
var selector = $(elt)
.parents()
.map(function () { return this.tagName; })
.get()
.reverse()
.concat([this.nodeName])
.join('>');
var id = $(elt).attr('id');
if (id) {
selector += '#' + id;
}
var classNames = $(elt).attr('class');
if (classNames) {
selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
}
css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
});
$('head').append('<style id="print-icons-style">' + css + '</style>');
}
function resetIconColors() {
$('#print-icons-style').remove();
}
এবং তারপরে window.print
মুদ্রণ ও পুনরায় সেট করার আগে শৈলীগুলি সেট করতে ফাংশনটি পরিবর্তন করুন ।
window._originalPrint = window.print;
window.print = function() {
setColors('body *');
setIconColors('body .fa');
window._originalPrint();
setTimeout(function () {
resetColors('body *');
resetIconColors();
}, 100);
}
যে অংশটির জন্য সিএসএস তৈরি করতে আইকনগুলির পাথগুলি পাওয়া যায়: উপাদানগুলির আগে এই এসও উত্তরটির একটি অনুলিপি থাকে