একটি ডিআইভি বিষয়বস্তু মুদ্রণ করুন


335

একটি ডিআইভি বিষয়বস্তু মুদ্রণের সেরা উপায় কি?



1
মুদ্রণ বলতে কী বুঝ? শারীরিক প্রিন্টারের মতো?
ইউরি ফক্টোরিভিচ

একটি মুদ্রক হিসাবে "মুদ্রণ"? বা নথিতে?
এড স্কেমবোর

আমি এখনও অবধি
ম্যাক্সআই

3
ঠিক যেমন কোনও ডিভ মুদ্রণের এই প্রশ্নের সমাধান অনুসন্ধান করার চেষ্টা করছে এমন কারও জন্য একটি রেফারেন্স। আমি নিম্নলিখিত উত্তরটি খুব দরকারী খুঁজে পেয়েছি: stackoverflow.com/a/7532581/405117
বিক্রম

উত্তর:


517

পূর্ববর্তী সংস্করণের তুলনায় সামান্য পরিবর্তন - 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;
}

8
এটি একটি দ্রুত সমাধান। আদর্শ সমাধানটি মুদ্রণের জন্য পৃথক সিএসএস ব্যবহার করা use সম্ভবত আপনি আপনার সমস্যার বিবরণ (প্রয়োজনীয়তা) সম্পর্কে বিস্তারিত বলতে পারেন।
বিল পাইটজেকে

6
আপনি পপআপ উইন্ডোতে স্টাইলশিটটি উল্লেখ করতে পারেন। <হেড> ট্যাগগুলির মধ্যে কোডের আরেকটি লাইন যুক্ত করুন: mywindow.docament.write ('<লিঙ্ক rel = "স্টাইলশীট" href = "main.css" টাইপ = "পাঠ্য / সিএসএস" />');
বিল পাইটজেকে

5
@ রহিল এটিতে এতে পরিবর্তন করুন: mywindow.docament.close (); mywindow.focus (); mywindow.print (); mywindow.close ();
আরএফএলডাব্লিউটাইম

3
new newwindow.focus () যোগ করুন; মুদ্রণ ক্রস ব্রাউজার সক্ষম করতে।
জ্যাকমাহোনি

7
প্রিন্ট পূর্বরূপ লোড করতে ব্যর্থ হলে এটি কখনও কখনও ঘটে থাকে, যখন মুদ্রণের বিষয়বস্তুটি বেশ বড় হয় (আমি কেবল ক্রোম দিয়ে লক্ষ্য করেছি যখন একই পৃষ্ঠাটি ফায়ারফক্সে পুরোপুরি প্রিন্ট করে, তবে এটি ফায়ারফক্স বা অন্যান্য ব্রাউজারগুলিতেও ঘটতে পারে তা বাদ পাব না)। আমি খুঁজে পাওয়ার সেরা উপায়টি উইন্ডোজ লোড হওয়ার পরে মুদ্রণটি চালানো (এবং বন্ধ করা)। সুতরাং এর পরে: এটি যুক্ত mywindow.document.write(data);করুন: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');এবং সরান: mywindow.print();এবংmywindow.close();
ফ্যাবিয়াস

164

আমি মনে করি এর থেকে আরও ভাল সমাধান আছে। পুরো ডকুমেন্টটি মুদ্রণের জন্য আপনার ডিভ তৈরি করুন, তবে কেবল এটি মুদ্রিত হলে:

@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;
    }
}

পারফেক্ট, পপআপের চেয়ে অনেক সুন্দর।
গ্রীন ওয়েবেডেভ

5
দুর্ভাগ্যবশত, এটা ইন্টারনেট কাজ করবে না বেশ আশানুরূপ, এই দেখুন: stackoverflow.com/questions/975129/...
jarek.jpa

16
একাধিক পৃষ্ঠায় ওভারফ্লো হওয়া বিষয়বস্তুগুলি Chrome এ কেটে গেছে বলে মনে হচ্ছে।
ইসমাইল স্মার্নু

আইইতে আপনাকে বাকী নথীটি গোপন করতে হবে। নীচের হিসাবে উপরে পরিবর্তন করে কাজ করবে: @ মিডিয়া প্রিন্ট {বডি * {প্রদর্শন: কিছুই নয়; my .MyDivTo মুদ্রণ {প্রদর্শন: ব্লক; পটভূমি রঙ: সাদা; উচ্চতা: 100%; প্রস্থ: 100%; অবস্থান: স্থির; শীর্ষ: 0; বাম: 0; মার্জিন: 0; প্যাডিং: 15px; হরফ আকার: 14px; লাইন-উচ্চতা: 18px; }}
রনব্ল্যাক

2
আপনার জেড-ইনডেক্স লাগাতে হতে পারে: 9999999; যদি আপনার অন্যান্য উপাদানগুলি উচ্চ অবস্থানে থাকে।
আদম এম

43

যদিও এটি @ গাবের দ্বারা বলা হয়েছে , আপনি যদি jQuery ব্যবহার করেন তবে আপনি আমার printElementপ্লাগইন ব্যবহার করতে পারেন ।

এখানে একটি নমুনা রয়েছে , এবং এখানে প্লাগইন সম্পর্কে আরও তথ্য ।

ব্যবহারটি বরং সরাসরি এগিয়ে রয়েছে, কেবল একটি jQuery নির্বাচকের সাথে একটি উপাদান দখল করুন এবং এটি মুদ্রণ করুন:

$("#myDiv").printElement();

আমি আসা করি এটা সাহায্য করবে!


14
8 বছর পরে, এটি "a.browser অপরিজ্ঞাপিত" উত্পাদন করবে কারণ। ব্রাউজার কলটি jquery 1.9-এ সরানো হয়েছে
কিংজম্ননারসুল

1
@ কিংসইনারসুল jQuery ব্যবহারকারীদের সাথে অসভ্য আচরণ করবেন না, তাদের জন্য এই সময়গুলি যথেষ্ট কঠোর; পি
আলেকজান্দ্রে ডাব্রিকোর্ট

@ আলেকজান্দ্রেডাব্রিকোর্ট লোল
কিংজেননারসোল

22

জ্যাকুরি ব্যবহার করে, কেবল এই ফাংশনটি ব্যবহার করুন:

<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>

$ ( 'শরীর') HTML (restorepage)। কাজ করবে না কারণ সেই সময় কোনও দেহের উপাদান উপলব্ধ নেই। সুতরাং এটিকে অবস্থানের সাথে প্রতিস্থাপন করা ভাল।
ডিবাগার

না you আপনি যদি পৃষ্ঠাটি পুনরায় লোড করেন তবে আপনি ফর্মগুলিতে যে কোনও তথ্য, বা অন্য যে কোনও সেটিংসের দরকার আছে তা মুছবেন। এটি পুরোপুরি সূক্ষ্ম কাজ করে। আপনি যদি কোডটি দেখার জন্য সময় নেন তবে আপনি দেখতে পাবেন যে পুনঃস্থাপনের জন্য পৃষ্ঠার সমস্ত পৃষ্ঠা উপলব্ধ আছে restore আমার কোড সম্পাদনা করার চেষ্টা বন্ধ করুন এবং হয় এটি নিজের জন্য পরীক্ষা করুন বা ফাংশনের প্রতিটি অংশ কী করে তা শিখুন।
গ্যারি হেইস

ইহা ভাল. এটি পৃষ্ঠা নকশা অন্তর্ভুক্ত মুদ্রণ করার সময় উপরোক্ত উল্টোদিকে যেখানে আমার এখনও শিরোনাম ইত্যাদি থেকে সিএসএস লিঙ্ক রাখা প্রয়োজন ধন্যবাদ। ধন্যবাদ!
জর্জ

আপনি যেভাবে পাশ করেছেন elসেটি ভয়ানক, বিশেষত জিকিউ ব্যবহারের কারণে। সহজভাবে পাস করা selectorএবং হার্ড কোডিং থেকে মুক্তি পাওয়ার জন্য আরও অনেক ভাল#
রোজা

আমি আজই সর্বদা এই পদ্ধতিটি ব্যবহার করেছি আমি লক্ষ্য করেছি যে এটি অ্যান্ড্রয়েড ডিভাইসে (গুগল ক্রোম) সঠিকভাবে কাজ করছে না। পৃষ্ঠার মুদ্রণযোগ্য অঞ্চলটি প্রতিবার পরিবর্তিত হয় এবং এর বাইরে কিছু অতিরিক্ত অংশ থাকে el। আমি মনে করি যখন দেহটি পুনঃস্থাপন করা হচ্ছে তখন মুদ্রণ কমান্ড প্রেরণ করা হবে।
আলী শেখপুর

18

এখান থেকে 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>

1
ফুটারএসআরটি 2 ভাগে বিভক্ত করার জন্য এটির একটি পরিবর্তন প্রয়োজন। কারণ ব্রাউজার বর্তমান পৃষ্ঠার মূল প্রান্ত হিসাবে "</body>" ব্যবহার করে। var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
মিরজায়ে

13

আমি 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>

আমি আশা করি এটি কারও সাহায্য করতে পারে


এটি আমার পক্ষে কাজ করেছিল! মূল উত্তর হিসাবে "মাইওয়াইন্ডো" বনাম "মাই উইন্ডো" ব্যবহার করে যদিও উটচক্রটি আমাকে দংশিত করেছিল। ধন্যবাদ!
অপকড ode

12
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ছাপা হবে।


ফুটারএসআরটি 2 ভাগে বিভক্ত করার জন্য এটির একটি পরিবর্তন প্রয়োজন। কারণ ব্রাউজার বর্তমান পৃষ্ঠার মূল প্রান্ত হিসাবে "</body>" ব্যবহার করে। var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
মিরজায়ে

এটাই বুদ্ধিমান! তবে হ্যাঁ, আপনাকে মিরজায়ে থেকে হ্যাকের দরকার আছে, অন্যথায় যা বডি ট্যাগটি ভেঙে যায় এবং আপনি ভাঙা বিন্যাস পেতে পারেন। হ্যাক সহ, এটি দুর্দান্ত কাজ করে! এমনকি বিশেষ প্রিন্ট শৈলীর সুবিধার্থে আপনি নিজের অভ্যন্তরের অভ্যন্তরেও যোগ করতে পারেন। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
ব্যবহারকারী 2662680

9

একটি পৃথক মুদ্রণ স্টাইলশীট তৈরি করুন যা আপনি মুদ্রণ করতে চান সামগ্রী বাদে অন্য সমস্ত উপাদানকে আড়াল করে। 'media="print"আপনি এটি লোড করার সময় এটি ব্যবহার করে পতাকাঙ্কিত করুন:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

এটি আপনাকে প্রিন্টআউটগুলির জন্য সম্পূর্ণ আলাদা স্টাইলশিট বোঝাতে দেয় to

আপনি যদি পৃষ্ঠার জন্য ব্রাউজারের মুদ্রণ ডায়ালগটি জোর করতে চান তবে আপনি JQuery ব্যবহার করে লোডের মতো এটি করতে পারেন:

$(function() { window.print(); });

বা আপনি চাইলে অন্য কোনও ইভেন্টের উদ্বোধন করে যেমন কোনও ব্যবহারকারী কোনও বোতামে ক্লিক করে।


2
হ্যাঁ এটিও কাজ করবে; এটি দৃ exactly় - ভাল, অসম্ভব - পরিস্থিতিটি ঠিক কী তা জানতে।
পয়েন্টি

আমি একমত যে পৃথক সিএসএস হল আদর্শ সমাধান। এবং ডিভের বিষয়বস্তুগুলি একটি নতুন উইন্ডোতে অনুলিপি করা একটি দ্রুত সমাধান।
বিল পাইটজেকে

9

আমি মনে করি এখনও অবধি প্রস্তাবিত সমাধানগুলিতে নিম্নলিখিত ত্রুটি রয়েছে:

  1. সিএসএস মিডিয়া ক্যোয়ারী সমাধানগুলি মুদ্রণের জন্য কেবল একটি ডিভ আছে বলে ধরে নিই।
  2. জাভাস্ক্রিপ্ট সমাধানগুলি কেবলমাত্র নির্দিষ্ট ব্রাউজারগুলিতেই কাজ করে।
  3. প্যারেন্ট উইন্ডো বিষয়বস্তু ধ্বংস এবং পুনরায় চেষ্টা যা বিশৃঙ্খলা সৃষ্টি করে।

আমি উপরের সমাধানগুলিতে উন্নতি করেছি। এখানে এমন কিছু যা আমি পরীক্ষা করেছি যা নীচের সুবিধাগুলি সহ সত্যই ভাল কাজ করে।

  1. আইই, ক্রোম, সাফারি এবং ফায়ারফক্স সহ সমস্ত ব্রাউজারগুলিতে কাজ করে।
  2. প্যারেন্ট উইন্ডোটি ধ্বংস এবং পুনরায় লোড করে না।
  3. একটি পৃষ্ঠায় যে কোনও সংখ্যক ডিআইভি মুদ্রণ করতে পারে।
  4. ত্রুটিযুক্ত প্রবণ স্ট্রিং কনটেনটেশন এড়াতে এইচটিএমএল টেমপ্লেটগুলি ব্যবহার করে।

মূল বিষয়গুলি:

  1. নতুন তৈরি উইন্ডোতে একটি ওলোডলোড = "উইন্ডোজ.প্রিন্ট ()" থাকতে হবে।
  2. অভিভাবকের কাছ থেকে টার্গেট উইন্ডো.ক্লোজ () বা টার্গেট উইন্ডো.প্রিন্ট () কল করবেন না।
  3. নিশ্চিত করুন যে আপনি টার্গেটওয়াইন্ডো.ডোকামেন্ট.ক্লোজ () এবং টার্গেট.ফোকাস () করছেন
  4. আমি jquery ব্যবহার করছি তবে আপনি সরল জাভাস্ক্রিপ্ট ব্যবহার করে একই কৌশলটি করতে পারেন।
  5. আপনি এখানে কর্মে এটি দেখতে পারেন http://math.tools/table/m Multiplication । আপনি বাক্স শিরোনামের মুদ্রণ বোতামে ক্লিক করে প্রতিটি সারণী আলাদাভাবে মুদ্রণ করতে পারেন।

<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>
  


এটি স্বীকৃত ফলাফলের চেয়ে দুর্দান্ত এবং কাজ করা ক্রস ব্রাউজার!
نقصان_ডো_ব্লিং

7

এই দৃশ্যের সমাধান করার জন্য আমি একটি প্লাগইন লিখেছি। আমি সেখানে প্লাগইনগুলি থেকে অসন্তুষ্ট ছিলাম এবং আরও বিস্তৃত / কনফিগারযোগ্য কিছু তৈরিতে প্রস্তুত হয়েছি।

https://github.com/jasonday/printThis


1
আপনার কঠোর পরিশ্রমের জন্য অনেক ধন্যবাদ জেসন ..... !! সত্যিই আমার আরও প্রকল্পে ব্যবহার করতে যাচ্ছি। কি মাইন্ড

6

গৃহীত সমাধানটি কাজ করছে না। ক্রোম একটি ফাঁকা পৃষ্ঠা মুদ্রণ করছিল কারণ এটি সময়ে ছবিটি লোড করা হয়নি। এই পদ্ধতির কাজ করে:

সম্পাদনা: এটি প্রদর্শিত হয় গ্রহণযোগ্য সমাধানটি আমার পোস্টের পরে সংশোধিত হয়েছিল। ডাউনটা কেন? এই সমাধান পাশাপাশি কাজ করে।

    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;
    }

4

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি 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;
    }
  }

3

যদিও @ বিবি উত্তর একটি একক পৃষ্ঠা মুদ্রণের জন্য সেরা ছিল।

তবে একই সাথে সিআরটিএল + পি সহ একাধিক পৃষ্ঠাগুলি মুদ্রণ করতে নীচের সমাধানটি সহায়তা করতে পারে।

@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;
}}

2
  • একটি নতুন উইন্ডো খুলুন
  • নতুন উইন্ডোর ডকুমেন্ট অবজেক্টটি খুলুন এবং এতে একটি সাধারণ ডকুমেন্ট লিখুন যা আপনি পেয়েছেন ডিভ ছাড়া কিছুই নেই এবং প্রয়োজনীয় এইচটিএমএল শিরোনাম ইত্যাদি - আপনার বিষয়বস্তুর উপর নির্ভর করে আপনিও স্টাইলশিটে ডকুমেন্টটি টানতে চাইতে পারেন
  • উইন্ডো.প্রিন্ট () কল করতে নতুন পৃষ্ঠায় একটি স্ক্রিপ্ট রাখুন
  • স্ক্রিপ্টটি ট্রিগার করুন

2

এখানে আমার 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);

2

আপনি যদি মূল দস্তাবেজ থেকে সমস্ত শৈলী (ইনলাইন শৈলী সহ) পেতে চান তবে আপনি এই পদ্ধতির ব্যবহার করতে পারেন।

  1. সম্পূর্ণ নথি অনুলিপি করুন
  2. আপনার মুদ্রণ করতে চাইলে উপাদানটি দিয়ে দেহটি প্রতিস্থাপন করুন।

বাস্তবায়ন:

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)
  }   
}

2
আমি জানি না যে এটিই সেরা সমাধান, তবে এটি পুরোপুরি কার্যকর হয়েছিল। ধন্যবাদ!
বুড়ো

এটি যদি কাজ করে তবে সেরা হতে হবে :)
স্টেফান নরবার্গ

2

দ্রষ্টব্য: এটি কেবল jQuery সক্ষম সাইটগুলির সাথে কাজ করে

এই দুর্দান্ত কৌশলটি এটি খুব সহজ। এটি আমার জন্য গুগল ক্রোম ব্রাউজারে কাজ করেছে । ফায়ারফক্স আপনাকে প্লাগইন ছাড়াই পিডিএফ প্রিন্ট করতে দেয় না।

  1. প্রথমে (সিটিআরএল + শিফট + আই) / (সিএমডি + অপশন + আই) ব্যবহার করে ইন্সপেক্টরটি খুলুন।
  2. কনসোলে এই কোডটি টাইপ করুন:

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
  1. এটি মুদ্রণ ডায়ালগ আরম্ভ করে। একটি শারীরিক মুদ্রণ নিন বা এটি পিডিএমে সংরক্ষণ করুন (ক্রোমে)। সম্পন্ন!

যুক্তিটি সহজ। আমরা একটি নতুন স্ক্রিপ্ট ট্যাগ তৈরি করছি এবং বডি ট্যাগ বন্ধের সামনে এটি সংযুক্ত করছি। আমরা এইচটিএমএলে একটি jQuery মুদ্রণ এক্সটেনশান ইনজেকশন। আপনার নিজস্ব ডিভি ট্যাগ আইডি দিয়ে মাইডিভউইথ স্টাইলগুলি পরিবর্তন করুন । এখন এটি মুদ্রণযোগ্য ভার্চুয়াল উইন্ডো প্রস্তুত করার যত্ন নেয়।

এটি কোনও সাইটে চেষ্টা করুন। কেবলমাত্র ক্যাভিয়েট কখনও কখনও জটিলভাবে লেখা হয় সিএসএস শৈলীর অনুপস্থিতির কারণ হতে পারে। তবে আমরা বেশিরভাগ সময় সামগ্রীটি পাই।


1

অপেরাতে, চেষ্টা করুন:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

1

এখানে একটি আইফ্রেম সমাধান যা আই এবং ক্রোমের জন্য কাজ করে:

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);
}

1

যে কোনও 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();

আশাকরি এটা সাহায্য করবে.


1

আমি কোয়েলেসলেটর ব্যবহার করতে, 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>উপাদানগুলির মানগুলি অনুলিপি করে না । ব্যবহারকারী টাইপ করেছেন তা সহ আমি এটি কীভাবে ব্যবহার করতে পারি?
ম্যালকম সালভাদোর

@ মালকি.কিড আপনি যা জিজ্ঞাসা করছেন সে সম্পর্কে দয়া করে ভাবুন। আপনি একটি ফর্ম প্রিন্ট করতে চান, আপনি ফর্ম উপাদানে দাগ ঘটনা হুক এবং অ্যাট্রিবিউট মান, ডিফল্ট এবং innerText নির্বাচিত সেট করতে হবে <input>, <select>, <textarea>compontents তাদের রানটাইম মান হতে হবে। সেখানে বিকল্প আছে, কিন্তু এটা এই স্ক্রিপ্টের সাথে একটি সমস্যা, কিন্তু কিভাবে ব্রাউজার কাজ সঙ্গে একটি সমস্যা নয়, এবং পেতে innerHTMLইনপুট দস্তাবেজ, ক্যানভাস ইত্যাদি সম্পত্তি
MrMesees

আমি ইতিমধ্যে মাধ্যমে একটি সমাধান পৌঁছেছি .attr('value',)। আমি এমনকি পাঠ্য এলাকা (সংযোজন করে) এবং চেকবাক্সগুলি জন্য এটা করেছি ( .attr('checked',))। আমি দুঃখিত যা আমি জিজ্ঞাসা করছি সম্পর্কে যথেষ্ট চিন্তা না হলে আমি দুঃখিত
ম্যালকম সালভাদোর

ক্লাসের সাথে ভাগ করে নেওয়ার যত্ন? মন্তব্যগুলিতে একটি টুকরো বা কিছু হতে পারে maybe আমি এটি upvote করব।
মিঃমিসিজ

0

নীচের কোডটি সমস্ত প্রাসঙ্গিক নোডগুলি অনুলিপি করে যা ক্যোয়ারী নির্বাচক দ্বারা লক্ষ্যবস্তু করা হয়, তাদের স্টাইলগুলির অনুলিপি স্ক্রিনে দেখা যায়, যেহেতু 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')

0

এটি সত্যিকারের পুরানো পোস্ট তবে এখানে সঠিক উত্তর ব্যবহার করে আমি কী তৈরি করেছি তা আমার আপডেট। আমার সমাধানটি 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;
});

চেষ্টা করে দেখুন


-1

সেরা উত্তর হিসাবে একই, আপনি যদি আমার মত ছবিটি মুদ্রণ করতে চান তবে:

আপনি যদি চিত্রটি মুদ্রণ করতে চান:

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(); });
টিম ভার্মেলেন

-4

এটি করার সর্বোত্তম উপায় হ'ল ডিভের বিষয়বস্তুগুলি সার্ভারে জমা দেওয়া এবং একটি নতুন উইন্ডো খোলার যেখানে সার্ভার সেই সামগ্রীগুলি নতুন উইন্ডোতে রাখতে পারে।

যদি এটি কোনও বিকল্প না হয় তবে জাভাস্ক্রিপ্টের মতো ক্লায়েন্ট-সাইডের ভাষাটি ডিভ বাদে পৃষ্ঠাটিতে সমস্ত কিছু আড়াল করতে ব্যবহার করতে পারেন এবং পৃষ্ঠাটি মুদ্রণ করতে পারেন ...


1
এটি সার্ভারে বাউন্স করার দরকার নেই। আপনি একটি ব্রাউজার উইন্ডো খুলতে এবং বিষয়বস্তু সেট করতে এবং মুদ্রণ কমান্ডটি আবেদন করতে পারেন।
জনাথন ফাউস্ট

আপনি ক্লায়েন্ট থেকে একটি নতুন উইন্ডো তৈরি করতে পারেন।
পয়েন্টি

1
জোনাথন: আমি সমাধানটি পছন্দ করি। আপনার কোন উদাহরণ কোড আছে?
ব্যবহারকারী 21
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.