‫بهینه‌سازی چاپ وب در اکوسیستم دات‌نت: راهنمای جامع طراحی صفحات وب سازگار با پرینت

چکیده: در توسعه سامانه‌های وب مدرن تحت پلتفرم‌های مایکروسافت دات‌نت (ASP.NET Core اعم از MVC، Razor Pages و Blazor)، تمرکز عمده مهندسان نرم‌افزار معطوف به واکنش‌گرایی در نمایشگرهای دیجیتال، دسترس‌پذیری و کارایی بارگذاری است. با این وجود، خروجی چاپ کاغذی یا تولید اسناد آرشیوی مانند PDF یکی از نیازمندی‌های بنیادین در سامانه‌های سازمانی، اتوماسیون اداری، داشبوردهای مدیریتی و گزارش‌دهی مالی به شمار می‌رود. این مقاله به بررسی جامع اصول، معماری و پیاده‌سازی سبک‌های اختصاصی چاپ (Print Stylesheets) در بستر برنامه‌های وب می‌پردازد. ضمن ترکیب رویکردهای مبتنی بر استاندارد @media print در CSS و ساختارهای چرخه‌حیات وب در دات‌نت، راهکارهای حل چالش‌های فنی از جمله حذف عناصر افزونه، رندر لینک‌های غیرقابل کلیک، مدیریت شکست صفحات (Page Breaks)، مدیریت جداول بزرگ داده‌ای و بهینه‌سازی قطعه‌کدهای برنامه‌نویسی ارائه می‌شود.

• سهولت مطالعه و حاشیه‌نویسی: مطالعه متون طولانی و تحلیلی روی کاغذ خستگی بصری کمتری نسبت به نمایشگرها ایجاد می‌کند و امکان نت‌برداری حاشیه‌ای را برای تصمیم‌گیران فراهم می‌سازد.
• پشتیبان‌گیری امن و دسترس‌پذیری بدون اینترنت: مدارک حیاتی نظیر رزروها، فاکتورهای رسمی، برنامه‌های سفر و اطلاعات تماس در مواقع قطعی شبکه یا اتمام باتری تجهیزات هوشمند، تنها در قالب نسخه فیزیکی یا آفلاین قابل اتکا هستند.
• نگهداری بلندمدت و بایگانی اسناد (Preservation): در سیستم‌های رسمی، ثبت مستندات نیازمند بایگانی فیزیکی یا تولید فایل‌های استاندارد غیرقابل تغییر است. در نبود استایل‌های متناسب چاپ، اطلاعات ذخیره‌شده مخدوش خواهند شد.

@media print {
    /* قواعد و استایل‌های اختصاصی چاپ در این بخش تعریف می‌شوند */
}

<!-- استایل‌های عمومی صفحه -->
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

<!-- استایل اختصاصی چاپ؛ صرفاً در زمان چاپ یا تولید PDF بارگذاری می‌شود -->
<link rel="stylesheet" href="~/css/print.css" media="print" asp-append-version="true" />

مزیت معماری: مشخصه media="print" سبب می‌شود مرورگر دانلود این فایل را با اولویت پایین‌تر انجام دهد و از مسدود شدن رندر اولیه (Render Blocking) برای کاربران عادی در وب جلوگیری شود.

• نوارهای ناوبری، هدر، فوتر و سایدبارها.
• دکمه‌های فراخوان به عمل (CTA)، ویجت‌های اشتراک در شبکه‌های اجتماعی و سیستم نظرات.
• تصاویر صرفاً تزئینی (بنرها و تصاویر پس‌زمینه).

@media print {
    /* حذف خودکار المان‌های معنایی غیرضروری */
    header, 
    nav, 
    footer, 
    aside, 
    .sidebar, 
    .btn, 
    .alert,
    .no-print {
        display: none !important;
    }

    /* گسترش پهنای محتوای اصلی به کل صفحه */
    main, .content-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

<div class="row">
    <div class="col-md-9">
        <article class="report-body">
            @RenderBody()
        </article>
    </div>
    <div class="col-md-3 no-print">
        <vc:sidebar-widgets />
    </div>
</div>

@media print {
    /* نمایش آدرس‌های مطلق */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 85%;
        color: #555;
    }

    /* تصحیح آدرس‌های نسبی و اتصال به دامنه اصلی */
    a[href^="/"]::after {
        content: " (https://yourdomain.com" attr(href) ")";
    }

    /* جلوگیری از نمایش پیوندهای درون‌صفحه‌ای یا توابع جاوااسکریپت */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
}

<!-- در بدنه محتوا -->
<p>
    طبق گزارش اعلام شده توسط مایکروسافت
    <a href="https://learn.microsoft.com/aspnet/core">
        مستندات دات‌نت<sup class="print-only">[۱]</sup>
    </a>، تغییرات جدید اعمال گردید.
</p>

<!-- بخش انتهای سند اختصاصی چاپ -->
<section class="print-only print-references">
    <h3>فهرست مراجع و پیوندها</h3>
    <ol>
        <li>مستندات دات‌نت: https://learn.microsoft.com/aspnet/core</li>
    </ol>
</section>

/* پنهان در نمایشگر دیجیتال */
.print-only {
    display: none;
}

@media print {
    .print-only {
        display: block !important;
    }
    sup.print-only {
        display: inline !important;
    }
}

@page {
    size: A4 portrait; /* ابعاد استاندارد A4 عمودی */
    margin: 1.5cm;     /* حاشیه استاندارد برگه */
}

@media print {
    /* جلوگیری از شکستگی نامناسب درون بلوک‌های حساس */
    h1, h2, h3, h4 {
        break-after: avoid; /* عدم ایجاد شکست برگه بلافاصله بعد از تیتر */
        page-break-after: avoid; /* جهت سازگاری با موتورهای قدیمی‌تر */
    }

    p, blockquote {
        orphans: 3; /* حداقل ۳ سطر باید در انتهای صفحه قبلی بماند */
        widows: 3;  /* حداقل ۳ سطر باید به ابتدای صفحه جدید منتقل شود */
    }

    .report-card, .invoice-summary {
        break-inside: avoid; /* مانع دو تکه شدن یک کارت گزارش یا جدول خلاصه */
        page-break-inside: avoid;
    }
}

@media print {
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    /* تکرار هدر جدول در بالای هر صفحه پرینت‌شده جدید */
    thead {
        display: table-header-group;
    }

    /* جلوگیری از دو نیم شدن یک ردیف در مرز برگه */
    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    th, td {
        border: 1px solid #ccc !important;
        padding: 6px 10px !important;
        font-size: 10pt;
    }
}

@media print {
    pre, code {
        font-family: 'Consolas', 'Courier New', monospace;
        font-size: 9pt;
        white-space: pre-wrap !important; /* شکستن هوشمند خطوط طولانی */
        word-break: break-all;
        border: 1px solid #ddd;
        background-color: #fafafa !important;
        color: #000 !important; /* صرفه‌جویی در جوهر و کنتراست شفاف */
    }
}

• Google Chrome / Microsoft Edge: ابزار Developer Tools (F12) را باز کرده، از منوی سه‌نقطه، بخش More tools گزینه Rendering را انتخاب کرده و مقدار Emulate CSS media type را روی print تنظیم کنید.
• Mozilla Firefox: در تب Inspector و پنل Rules، بر روی آیکون کوچک نمایانگر کاغذ (کلید سوئیچ مدیا پرینت) کلیک کنید.
• ارزیابی در ابعاد واقعی (Print to PDF): شبیه‌سازهای مرورگر، ابعاد دقیق پورت دیداری (Viewport) و مرزبندی فیزیکی برگه‌ها را شبیه‌سازی نمی‌کنند. مرحله پایانی خطایابی همواره باید بازبینی پنجره پیش‌نمایش چاپ (Ctrl + P) و استخراج PDF باشد.