Printing a Page or Specific Element Data using JavaScript - window.print() method

JavaScript Function in Javascript (Article) Function in Javascript (Program)

160

In this section you will learn how to print particular element from a webpage. Here we have written one function myPrintfunction to print a paragraph.

Program:

<span class="pln"> 
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">

</span><span class="tag">&lt;h2&gt;</span><span class="pln">JavaScript Functions to print Specific Element With Id - atnyla.com</span><span class="tag">&lt;/h2&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">I Don't want to print this text.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> 

</span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"textAreaToPrint"</span><span class="tag">&gt;</span><span class="pln">
This is the text I want to print.
</span><span class="tag">&lt;/p&gt;</span><span class="pln">


</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln">  </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">myPrintfunction</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-sm btn-outline-primary m-1"</span><span class="tag">&gt;</span><span class="pln"> Print </span><span class="tag">&lt;/button&gt;</span><span class="pln"> 


</span><span class="tag">&lt;script&gt;</span><span class="pln">
   </span><span class="kwd">function</span><span class="pln"> myPrintfunction</span><span class="pun">(){</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> backup </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">innerHTML</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> divcontent </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"textAreaToPrint"</span><span class="pun">).</span><span class="pln">textContent</span><span class="pun">;</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln">  divcontent</span><span class="pun">;</span><span class="pln"> 
        window</span><span class="pun">.</span><span class="pln">print</span><span class="pun">();</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> backup</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span><span class="pln"> 
                                           

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
 </span>

Output:

 
Live Preview