پرینت از صفحه HTML با جاوا اسکریپت

بسیاری از اوقات در برنامه نویسی وب نیاز داریم بخشی از صفحه را به عنوان گزارش چاپ کرده و به کاربر تحویل دهیم تا آن را پرینت بگیرد، در این مواقع معمولا افزونه هایی مانند StimulReport در سمت سرور این کار را انجام می دهند اما در این مقاله پرینت از صفحه HTML با جاوا اسکریپت به pdf را به شما آموزش می دهیم تا به سادگی این کار را در سمت کلاینت انجام دهید بدون آن که فشاری به سرور بیاورید.

پرینت از صفحه HTML با جاوا اسکریپت

اگر قصد داشته باشید قسمتی از محتویات صفحه سایت خود مانند محتویات یک div خاص یا یک جدول درون صفحه را پرینت کنید، یک راه حل آن استفاده از کد جاوااسکریپت است. به عنوان مثال فرض کنید در تگ های HTML درون یک div جدولی از لیست محصولات خود دارید و می­خواهید امکان پرینت کردن این جدول را ایجاد کنید.

برای این کار مطابق کد زیر عمل کنید.

<!doctype html>
<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>HTML Div print</title>    
        
    </head>
    <body>
       <div id="header">
  <h1>پرینت از صفحه html - آموزشگاه آنلاین فرازگر</h1>
</div>

<div id="print_this">
  
  <table>
    <thead>
        <tr>
            <th>نام</th>
            <th>نا خانوادگی</th>
            <th>تلفن همراه</th>
            <th>شهر</th>
        </tr>
    </thead>
    <tbody>

      <tr>
        <td>اردشیر</td>
        <td>بابکان</td>
        <td>09131112233</td>
        <td>اصفهان</td>
      </tr>
      
      <tr>
        <td>ناصر</td>
        <td>ناصریفر</td>
        <td>09146668855</td>
        <td>قشم</td>
      </tr>

    </tbody>
</table>
  
</div>

<div class="text-center" style="margin-top:20px;">
            <button class="btn btn-info"  onclick="printdiv()" target="_blank" >پرینت </button>
 </div>
            
    
    </body>
<script>
    function printdiv()
    {
        var printContents = document.getElementById('print_this').innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>
</html>

 

  • در کد بالا با فشردن دکمه پرینت تابع ()printdiv فراخوانی می­ شود.
  • در این تابع محتوای بخشی که قرار است پرینت شود به وسیله id آن تگَ، انتخاب می­ شود.
  • در کد بالا printpage در واقع id تگی است که قصد داریم ازمحتویات درون آن پرینت بگبریم.

بنابراین شما میتوانید به هر بخشی از صفحه که می خواهید پرینت کنید یک آیدی مشخص بدهید و آن آیدی را در خط اول تابع ()printdiv وارد کنید. در نتیجه با زدن دکمه پرینت از محتوای درون تگ مورد نظر شما پرینت گرفته خواهد شد.

مثال پرینت از صفحه وب

در مثال زیر قابلیت پرینت از صفحات وب را مشاهده می کنید:

مشاهده نتیجه

برای آن استایل های شما در پرینت مشخص شود و رنگ بندی آن را مشاهده کنید در قسمت تنظیمات بیشتر:

  • گزینه Background graphics را فعال کنید.
  • در صورتی که تمایل دارید ساعت زمان پرینت در بالا و پایین برگه چاپ نشود گزینه Headers and footers را غیر فعال کنید.

 

 

مقاله پیشنهادی :

تبدیل جدول Html به اکسل

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *