একটি ডিআইভি বিষয়বস্তু মুদ্রণের সেরা উপায় কি?
একটি ডিআইভি বিষয়বস্তু মুদ্রণের সেরা উপায় কি?
উত্তর:
পূর্ববর্তী সংস্করণের তুলনায় সামান্য পরিবর্তন - CHROME এ পরীক্ষা করা হয়েছে
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
mywindow.document.write(data);
করুন: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');
এবং সরান: mywindow.print();
এবংmywindow.close();
আমি মনে করি এর থেকে আরও ভাল সমাধান আছে। পুরো ডকুমেন্টটি মুদ্রণের জন্য আপনার ডিভ তৈরি করুন, তবে কেবল এটি মুদ্রিত হলে:
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
যদিও এটি @ গাবের দ্বারা বলা হয়েছে , আপনি যদি jQuery ব্যবহার করেন তবে আপনি আমার printElement
প্লাগইন ব্যবহার করতে পারেন ।
এখানে একটি নমুনা রয়েছে , এবং এখানে প্লাগইন সম্পর্কে আরও তথ্য ।
ব্যবহারটি বরং সরাসরি এগিয়ে রয়েছে, কেবল একটি jQuery নির্বাচকের সাথে একটি উপাদান দখল করুন এবং এটি মুদ্রণ করুন:
$("#myDiv").printElement();
আমি আসা করি এটা সাহায্য করবে!
জ্যাকুরি ব্যবহার করে, কেবল এই ফাংশনটি ব্যবহার করুন:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>
আপনার মুদ্রণ বোতামটি দেখতে এইরকম হবে:
<button id="print" onclick="printContent('id name of your div');" >Print</button>
সম্পাদনা: আপনার যদি ফর্ম ডেটা রাখার দরকার থাকে তবে ক্লোনটি সেটিকে অনুলিপি করবে না, সুতরাং আপনাকে কেবলমাত্র সমস্ত ফর্ম ডেটা ধরতে হবে এবং পুনরুদ্ধার করার পরে এটি পুনরুদ্ধার করার পরে প্রতিস্থাপন করতে হবে:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
el
সেটি ভয়ানক, বিশেষত জিকিউ ব্যবহারের কারণে। সহজভাবে পাস করা selector
এবং হার্ড কোডিং থেকে মুক্তি পাওয়ার জন্য আরও অনেক ভাল#
el
। আমি মনে করি যখন দেহটি পুনঃস্থাপন করা হচ্ছে তখন মুদ্রণ কমান্ড প্রেরণ করা হবে।
এখান থেকে http://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page //Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print //Other content you wouldn't like to print
</body>
</html>
আমি Bill Paetzke
একটি ডিভ চিত্র ছাপাতে উত্তর ব্যবহার করেছি তবে এটি গুগল ক্রোমে কাজ করে না
এটি ঠিক কাজ করার জন্য আমার এই লাইনটি যুক্ত myWindow.onload=function(){
করার দরকার ছিল এবং এখানে পূর্ণ কোড
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>
এছাড়াও যদি কারও আইডি দিয়ে একটি ডিভি প্রিন্ট করতে হয় তবে তাকে জিকিউরি লোড করার দরকার নেই
এটি করার জন্য এখানে খাঁটি জাভাস্ক্রিপ্ট কোড রয়েছে
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>
আমি আশা করি এটি কারও সাহায্য করতে পারে
function printdiv(printdivname) {
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
এটি আপনার পছন্দ মতো div
অঞ্চলটি মুদ্রণ করবে এবং সামগ্রীটি যেমন ছিল তেমন সেট করবে। printdivname
হয় div
ছাপা হবে।
একটি পৃথক মুদ্রণ স্টাইলশীট তৈরি করুন যা আপনি মুদ্রণ করতে চান সামগ্রী বাদে অন্য সমস্ত উপাদানকে আড়াল করে। 'media="print"
আপনি এটি লোড করার সময় এটি ব্যবহার করে পতাকাঙ্কিত করুন:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
এটি আপনাকে প্রিন্টআউটগুলির জন্য সম্পূর্ণ আলাদা স্টাইলশিট বোঝাতে দেয় to
আপনি যদি পৃষ্ঠার জন্য ব্রাউজারের মুদ্রণ ডায়ালগটি জোর করতে চান তবে আপনি JQuery ব্যবহার করে লোডের মতো এটি করতে পারেন:
$(function() { window.print(); });
বা আপনি চাইলে অন্য কোনও ইভেন্টের উদ্বোধন করে যেমন কোনও ব্যবহারকারী কোনও বোতামে ক্লিক করে।
আমি মনে করি এখনও অবধি প্রস্তাবিত সমাধানগুলিতে নিম্নলিখিত ত্রুটি রয়েছে:
আমি উপরের সমাধানগুলিতে উন্নতি করেছি। এখানে এমন কিছু যা আমি পরীক্ষা করেছি যা নীচের সুবিধাগুলি সহ সত্যই ভাল কাজ করে।
মূল বিষয়গুলি:
<script id="print-header" type="text/x-jquery-tmpl">
<html>
<header>
<title>Printing Para {num}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
max-width: 300px;
}
</style>
</header>
<body onload="window.print()">
<h2>Printing Para {num} </h2>
<h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
</body>
</html>
</script>
<script>
$('.printthis').click(function() {
num = $(this).attr("data-id");
w = window.open();
w.document.write(
$("#print-header").html().replace("{num}",num) +
$("#para-" + num).html() +
$("#print-footer").html()
);
w.document.close();
w.focus();
//w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
///w.close(); Don't do this otherwise chrome won't work
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
<p class="para" id="para-1">
Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="para" id="para-2">
Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
এই দৃশ্যের সমাধান করার জন্য আমি একটি প্লাগইন লিখেছি। আমি সেখানে প্লাগইনগুলি থেকে অসন্তুষ্ট ছিলাম এবং আরও বিস্তৃত / কনফিগারযোগ্য কিছু তৈরিতে প্রস্তুত হয়েছি।
গৃহীত সমাধানটি কাজ করছে না। ক্রোম একটি ফাঁকা পৃষ্ঠা মুদ্রণ করছিল কারণ এটি সময়ে ছবিটি লোড করা হয়নি। এই পদ্ধতির কাজ করে:
সম্পাদনা: এটি প্রদর্শিত হয় গ্রহণযোগ্য সমাধানটি আমার পোস্টের পরে সংশোধিত হয়েছিল। ডাউনটা কেন? এই সমাধান পাশাপাশি কাজ করে।
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি jQuery এই সমস্যাটি সমাধান করেছি।
function printContents(id) {
var contents = $("#"+id).html();
if ($("#printDiv").length == 0) {
var printDiv = null;
printDiv = document.createElement('div');
printDiv.setAttribute('id','printDiv');
printDiv.setAttribute('class','printable');
$(printDiv).appendTo('body');
}
$("#printDiv").html(contents);
window.print();
$("#printDiv").remove();
}
সিএসএস
@media print {
.non-printable, .fancybox-outer { display: none; }
.printable, #printDiv {
display: block;
font-size: 26pt;
}
}
যদিও @ বিবি উত্তর একটি একক পৃষ্ঠা মুদ্রণের জন্য সেরা ছিল।
তবে একই সাথে সিআরটিএল + পি সহ একাধিক পৃষ্ঠাগুলি মুদ্রণ করতে নীচের সমাধানটি সহায়তা করতে পারে।
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
এখানে আমার jquery মুদ্রণ প্লাগইন
(function ($) {
$.fn.printme = function () {
return this.each(function () {
var container = $(this);
var hidden_IFrame = $('<iframe></iframe>').attr({
width: '1px',
height: '1px',
display: 'none'
}).appendTo(container);
var myIframe = hidden_IFrame.get(0);
var script_tag = myIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
script_tag.appendChild(script);
myIframe.contentWindow.document.body.innerHTML = container.html();
myIframe.contentWindow.document.body.appendChild(script_tag);
myIframe.contentWindow.Print();
hidden_IFrame.remove();
});
};
})(jQuery);
আপনি যদি মূল দস্তাবেজ থেকে সমস্ত শৈলী (ইনলাইন শৈলী সহ) পেতে চান তবে আপনি এই পদ্ধতির ব্যবহার করতে পারেন।
বাস্তবায়ন:
class PrintUtil {
static printDiv(elementId) {
let printElement = document.getElementById(elementId);
var printWindow = window.open('', 'PRINT');
printWindow.document.write(document.documentElement.innerHTML);
setTimeout(() => { // Needed for large documents
printWindow.document.body.style.margin = '0 0';
printWindow.document.body.innerHTML = printElement.outerHTML;
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
}, 1000)
}
}
দ্রষ্টব্য: এটি কেবল jQuery সক্ষম সাইটগুলির সাথে কাজ করে
এই দুর্দান্ত কৌশলটি এটি খুব সহজ। এটি আমার জন্য গুগল ক্রোম ব্রাউজারে কাজ করেছে । ফায়ারফক্স আপনাকে প্লাগইন ছাড়াই পিডিএফ প্রিন্ট করতে দেয় না।
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
যুক্তিটি সহজ। আমরা একটি নতুন স্ক্রিপ্ট ট্যাগ তৈরি করছি এবং বডি ট্যাগ বন্ধের সামনে এটি সংযুক্ত করছি। আমরা এইচটিএমএলে একটি jQuery মুদ্রণ এক্সটেনশান ইনজেকশন। আপনার নিজস্ব ডিভি ট্যাগ আইডি দিয়ে মাইডিভউইথ স্টাইলগুলি পরিবর্তন করুন । এখন এটি মুদ্রণযোগ্য ভার্চুয়াল উইন্ডো প্রস্তুত করার যত্ন নেয়।
এটি কোনও সাইটে চেষ্টা করুন। কেবলমাত্র ক্যাভিয়েট কখনও কখনও জটিলভাবে লেখা হয় সিএসএস শৈলীর অনুপস্থিতির কারণ হতে পারে। তবে আমরা বেশিরভাগ সময় সামগ্রীটি পাই।
এখানে একটি আইফ্রেম সমাধান যা আই এবং ক্রোমের জন্য কাজ করে:
function printHTML(htmlString) {
var newIframe = document.createElement('iframe');
newIframe.width = '1px';
newIframe.height = '1px';
newIframe.src = 'about:blank';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
যে কোনও HTML উপাদান ব্যবহার করার জন্য জেনেরিক কিছু তৈরি করা হয়েছে
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();
আশাকরি এটা সাহায্য করবে.
আমি কোয়েলেসলেটর ব্যবহার করতে, alচ্ছিক সিএসএস যুক্ত করতে, বাধ্যতামূলক এইচ 1 ট্যাগটি সরিয়ে শিরোনামটি specifiedচ্ছিকভাবে নির্দিষ্ট বা উইন্ডো থেকে টানতে তৈরি করতে @ বিলপেটেস্কি উত্তরটি পরিবর্তন করেছি mod এটি আর কোনও অটো-প্রিন্ট করে না এবং ইন্টার্নালগুলি প্রকাশ করে যাতে এগুলি মোড়ক ফাংশনে বা আপনার পছন্দ মতো স্যুইচ আউট করা যায়।
কেবলমাত্র দুটি প্রাইভেট ওয়ার টিএমপি উইন্ডো এবং টিএমপিডোক যদিও আমি বিশ্বাস করি শিরোনাম, সিএসএস এবং এলেম অ্যাক্সেস আলাদা হতে পারে এটি সমস্ত ফাংশন আর্গুমেন্টগুলি ব্যক্তিগত বলে ধরে নেওয়া উচিত।
কোড:function PrintElem(elem, title, css) {
var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
var tmpDoc = tmpWindow.document;
title = title || document.title;
css = css || "";
this.setTitle = function(newTitle) {
title = newTitle || document.title;
};
this.setCSS = function(newCSS) {
css = newCSS || "";
};
this.basicHtml5 = function(innerHTML) {
return '<!doctype html><html>'+(innerHTML || "")+'</html>';
};
this.htmlHead = function(innerHTML) {
return '<head>'+(innerHTML || "")+'</head>';
};
this.htmlTitle = function(title) {
return '<title>'+(title || "")+'</title>';
};
this.styleTag = function(innerHTML) {
return '<style>'+(innerHTML || "")+'</style>';
};
this.htmlBody = function(innerHTML) {
return '<body>'+(innerHTML || "")+'</body>';
};
this.build = function() {
tmpDoc.write(
this.basicHtml5(
this.htmlHead(
this.htmlTitle(title) + this.styleTag(css)
) + this.htmlBody(
document.querySelector(elem).innerHTML
)
)
);
tmpDoc.close(); // necessary for IE >= 10
};
this.print = function() {
tmpWindow.focus(); // necessary for IE >= 10*/
tmpWindow.print();
tmpWindow.close();
};
this.build();
return this;
}
ব্যবহার:
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
<input>
উপাদানগুলির মানগুলি অনুলিপি করে না । ব্যবহারকারী টাইপ করেছেন তা সহ আমি এটি কীভাবে ব্যবহার করতে পারি?
<input>
, <select>
, <textarea>
compontents তাদের রানটাইম মান হতে হবে। সেখানে বিকল্প আছে, কিন্তু এটা এই স্ক্রিপ্টের সাথে একটি সমস্যা, কিন্তু কিভাবে ব্রাউজার কাজ সঙ্গে একটি সমস্যা নয়, এবং পেতে innerHTML
ইনপুট দস্তাবেজ, ক্যানভাস ইত্যাদি সম্পত্তি
.attr('value',)
। আমি এমনকি পাঠ্য এলাকা (সংযোজন করে) এবং চেকবাক্সগুলি জন্য এটা করেছি ( .attr('checked',)
)। আমি দুঃখিত যা আমি জিজ্ঞাসা করছি সম্পর্কে যথেষ্ট চিন্তা না হলে আমি দুঃখিত ।
নীচের কোডটি সমস্ত প্রাসঙ্গিক নোডগুলি অনুলিপি করে যা ক্যোয়ারী নির্বাচক দ্বারা লক্ষ্যবস্তু করা হয়, তাদের স্টাইলগুলির অনুলিপি স্ক্রিনে দেখা যায়, যেহেতু CSS নির্বাচকদের লক্ষ্যবস্তু করার জন্য ব্যবহৃত অনেক প্যারেন্ট উপাদানগুলি অনুপস্থিত থাকবে। প্রচুর শৈলীর সাথে প্রচুর চাইল্ড নোড থাকলে এটি কিছুটা পিছিয়ে পড়ে।
আদর্শভাবে আপনার কাছে একটি মুদ্রণ স্টাইল শীট প্রস্তুত থাকতে হবে তবে এটি এমন ক্ষেত্রে ব্যবহারের ক্ষেত্রে যেখানে কোনও প্রিন্ট স্টাইল শিট সন্নিবেশ করা যায় না এবং আপনি স্ক্রিনে যেমন দেখেন তেমন মুদ্রণ করতে চান।
আপনি যদি এই পৃষ্ঠায় ব্রাউজার কনসোলে নীচের আইটেমগুলি অনুলিপি করেন তবে এটি এই পৃষ্ঠায় সমস্ত কোড স্নিপেট প্রিন্ট করবে।
+function() {
/**
* copied from /programming/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
*/
var copyComputedStyle = function(from,to){
var computed_style_object = false;
//trying to figure out which style object we need to use depense on the browser support
//so we try until we have one
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
//if the browser dose not support both methods we will return null
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
//checking that the value is not a undefined
return typeof value !== 'undefined' &&
//checking that the value is not a object
typeof value !== 'object' &&
//checking that the value is not a function
typeof value !== 'function' &&
//checking that we dosent have empty string
value.length > 0 &&
//checking that the property is not int index ( happens on some browser
value != parseInt(value)
};
//we iterating the computed style object and compy the style props and the values
for(property in computed_style_object)
{
//checking if the property and value we get are valid sinse browser have different implementations
if(stylePropertyValid(property,computed_style_object[property]))
{
//applying the style property to the target element
to.style[property] = computed_style_object[property];
}
}
};
// Copy over all relevant styles to preserve styling, work the way down the children tree.
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
/** select elements to print with query selector **/
var printSelection = function(querySelector) {
// Create an iframe to make sure everything is clean and ordered.
var iframe = document.createElement('iframe');
// Give it enough dimension so you can visually check when modifying.
iframe.width = document.width;
iframe.height = document.height;
// Add it to the current document to be sure it has the internal objects set up.
document.body.append(iframe);
var nodes = document.querySelectorAll(querySelector);
if(!nodes || nodes.length == 0) {
console.error('Printing Faillure: Nothing to print. Please check your querySelector');
return;
}
for(i=0; i < nodes.length; i++) {
// Get the node you wish to print.
var origNode = nodes[i];
// Clone it and all it's children
var node = origNode.cloneNode(true);
// Copy the base style.
copyComputedStyle(origNode, node);
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
// Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
iframe.contentWindow.document.body.append(node);
}
// Print the window
iframe.contentWindow.print();
// Give the browser a second to gather the data then remove the iframe.
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
এটি সত্যিকারের পুরানো পোস্ট তবে এখানে সঠিক উত্তর ব্যবহার করে আমি কী তৈরি করেছি তা আমার আপডেট। আমার সমাধানটি jQuery ব্যবহার করে।
এর মূল বিষয় হ'ল যথাযথ মুদ্রণ দর্শন ব্যবহার করা, যথাযথ বিন্যাসের জন্য সমস্ত স্টাইলশিট অন্তর্ভুক্ত করা উচিত এবং সর্বাধিক ব্রাউজারগুলিতে সমর্থন করাও।
function PrintElem(elem, title, offset)
{
// Title constructor
title = title || $('title').text();
// Offset for the print
offset = offset || 0;
// Loading start
var dStart = Math.round(new Date().getTime()/1000),
$html = $('html');
i = 0;
// Start building HTML
var HTML = '<html';
if(typeof ($html.attr('lang')) !== 'undefined') {
HTML+=' lang=' + $html.attr('lang');
}
if(typeof ($html.attr('id')) !== 'undefined') {
HTML+=' id=' + $html.attr('id');
}
if(typeof ($html.attr('xmlns')) !== 'undefined') {
HTML+=' xmlns=' + $html.attr('xmlns');
}
// Close HTML and start build HEAD
HTML+='><head>';
// Get all meta tags
$('head > meta').each(function(){
var $this = $(this),
$meta = '<meta';
if(typeof ($this.attr('charset')) !== 'undefined') {
$meta+=' charset=' + $this.attr('charset');
}
if(typeof ($this.attr('name')) !== 'undefined') {
$meta+=' name=' + $this.attr('name');
}
if(typeof ($this.attr('http-equiv')) !== 'undefined') {
$meta+=' http-equiv=' + $this.attr('http-equiv');
}
if(typeof ($this.attr('content')) !== 'undefined') {
$meta+=' content=' + $this.attr('content');
}
$meta+=' />';
HTML+= $meta;
i++;
}).promise().done(function(){
// Insert title
HTML+= '<title>' + title + '</title>';
// Let's pickup all CSS files for the formatting
$('head > link[rel="stylesheet"]').each(function(){
HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
i++;
}).promise().done(function(){
// Print setup
HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';
// Finish HTML
HTML+= '</head><body>';
HTML+= '<h1 class="text-center mb-3">' + title + '</h1>';
HTML+= elem.html();
HTML+= '</body></html>';
// Open new window
var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
// Append new window HTML
printWindow.document.write(HTML);
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
/* Make sure that page is loaded correctly */
$(printWindow).on('load', function(){
setTimeout(function(){
// Open print
printWindow.print();
// Close on print
setTimeout(function(){
printWindow.close();
return true;
}, 3);
}, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
});
});
});
}
পরে আপনার সরল কিছু দরকার যেমন:
$(document).on('click', '.some-print', function() {
PrintElem($(this), 'My Print Title');
return false;
});
চেষ্টা করে দেখুন
সেরা উত্তর হিসাবে একই, আপনি যদি আমার মত ছবিটি মুদ্রণ করতে চান তবে:
আপনি যদি চিত্রটি মুদ্রণ করতে চান:
function printElem(elem)
{
Popup(jQuery(elem).attr('src'));
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<img src="'+data+'" />');
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
load
পপআপে একটি ইভেন্ট মিস করছেন । চিত্রটি লোড না হওয়ায় আপনি এটি খালি পৃষ্ঠাটি মুদ্রণ করবেন। =>$(popup).load(function(){ popup.focus(); popup.print(); });
এটি করার সর্বোত্তম উপায় হ'ল ডিভের বিষয়বস্তুগুলি সার্ভারে জমা দেওয়া এবং একটি নতুন উইন্ডো খোলার যেখানে সার্ভার সেই সামগ্রীগুলি নতুন উইন্ডোতে রাখতে পারে।
যদি এটি কোনও বিকল্প না হয় তবে জাভাস্ক্রিপ্টের মতো ক্লায়েন্ট-সাইডের ভাষাটি ডিভ বাদে পৃষ্ঠাটিতে সমস্ত কিছু আড়াল করতে ব্যবহার করতে পারেন এবং পৃষ্ঠাটি মুদ্রণ করতে পারেন ...