Web sayfalarında kullanıcıların içeriği hızlıca yazdırmasını sağlamak, kullanıcı deneyimi açısından önemli bir özelliktir. JavaScript’in window.print() fonksiyonu ile kolayca sayfanın tamamını veya belirli bir kısmını yazdırabilirsiniz. Bu fonksiyon, genellikle kullanıcıdan yazdırma işlemine onay almadan çalışmaz ve tarayıcının yazdırma penceresini açar.

JavaScript ile modern bir web sayfasını yazdırmaya uygun hale getirmek için, CSS kullanarak sayfada yalnızca yazdırılması gereken bölümlerin gösterilmesini sağlamanız mümkündür. CSS’in @media print özelliği sayesinde yazdırma işlemi sırasında görünmesini istemediğiniz ögeleri gizleyebilir, yazdırılacak içeriğin düzenini belirleyebilirsiniz.

Örneğin, modern bir yazdırma butonu ekleyerek, kullanıcıların kolayca yazdırma işlemi başlatmasını sağlayabilirsiniz. Bu örnekte, HTML ve CSS ile şık bir buton oluşturacak ve JavaScript ile bu butona yazdırma işlevi ekleyeceğiz.

HTML

<div class="content">
    <h1>Yazdırılacak Başlık</h1>
    <p>Bu içerik yazdırılacaktır. Yazdırma işlemi için aşağıdaki butonu kullanabilirsiniz.</p>
  </div>
  <div class="non-printable">
    <button class="print-btn" onclick="window.print()">Sayfayı Yazdır</button>
  </div>

CSS

.print-btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    .print-btn:hover {
      background-color: #45a049;
    }
    /* Yazdırma stili */
    @media print {
      .print-btn, .non-printable {
        display: none;
      }
    }

Yukarıda paylaştığım kodlarda .print-btn sınıfı ile şık bir yazdırma butonu tasarladık. JavaScript onclick özelliğini kullanarak, butona basıldığında window.print() fonksiyonunu çalıştırıyoruz. Ayrıca @media print ile .print-btn ve .non-printable sınıflarını yazdırma sırasında gizledik, böylece kullanıcıya yalnızca gerekli içerik gösterilir.

Bu basit yöntemle JavaScript kullanarak modern tasarımlı ve kullanıcı dostu bir yazdırma işlemi gerçekleştirebilir, içeriğin sadece gerektiğinde yazdırılmasını sağlayabilirsiniz.

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.