Edge浏览器打印默认开启页眉页脚的设置方法咨询

Great question—Edge's default behavior of hiding print headers/footers can be frustrating when you need consistent output across Chrome, IE, and Edge. The short answer is: you can't force Edge's native headers/footers to be enabled by default via CSS (those are controlled by browser settings), but you can create custom headers/footers using CSS @page rules and fixed positioning that will print on every page regardless of user settings. Here's how to do it:

1. Browser-Level Setting (For End Users) #

First, if you just want to guide your users to enable Edge's native headers/footers by default for your site:

• Press Ctrl+P to open the print dialog
• Click "More settings"
• Under the "Options" section, check "Headers and footers"
• Edge will remember this setting for your site going forward.

But since this relies on user action, it's not reliable for ensuring consistent print output from your app. For that, use the CSS approach below.

2. CSS-Based Custom Headers/Footers (For Your Web App) #

This method adds custom headers/footers directly to your print content, so they'll appear on every page no matter what the user's Edge settings are.

Step 1: Add CSS Rules #

Include these styles in your print stylesheet (or inject them into your print iframe):

/* Define page margins to make space for headers/footers */
@page {
  size: A4; /* Adjust to your paper size */
  margin: 2cm; /* Top/bottom margins need to accommodate header/footer height */
}

/* Custom header - fixed to the top of every page */
.print-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1cm;
  padding: 0.5cm;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
  text-align: center;
}

/* Custom footer with page numbers */
.print-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1cm;
  padding: 0.5cm;
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
  text-align: center;
}

/* Auto-generate page numbers */
.page-counter::after {
  content: counter(page) " of " counter(pages);
}

/* Push main content down/up to avoid overlapping with headers/footers */
.print-content {
  margin-top: 2cm;
  margin-bottom: 2cm;
}

Step 2: Add Header/Footer Elements to Your Print Content #

In the HTML you're printing (inside your iframe), include these elements:

<div class="print-header">Your App Name | Document Title</div>
<div class="print-footer">
  <span class="page-counter"></span> | Printed on: <span id="print-date"></span>
</div>
<div class="print-content">
  <!-- Your actual print content goes here -->
</div>

Step 3: Integrate with Your Existing iframe Code #

Since you're using an iframe for printing, update your createIframe function to inject the CSS and header/footer elements into the iframe's document. Here's a modified version of your code:

private createIframe() {
  let oldFrame: any = document.getElementsByClassName('e-ngx-print-frame');
  if (oldFrame.length > 0) {
    document.body.removeChild(oldFrame[0]);
  }
  
  const iframe = document.createElement('iframe');
  iframe.className = 'e-ngx-print-frame';
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const printDate = new Date().toLocaleString();
  
  // Insert your print content + headers/footers
  iframeDoc.body.innerHTML = `
    <div class="print-header">My Custom Header</div>
    <div class="print-footer">
      <span class="page-counter"></span> | Printed on: ${printDate}
    </div>
    <div class="print-content">
      <!-- Replace this with your actual print content -->
      <p>Your page content here...</p>
    </div>
  `;
  
  // Inject the print styles
  const style = iframeDoc.createElement('style');
  style.textContent = `
    @page {
      size: A4;
      margin: 2cm;
    }
    .print-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 1cm;
      padding: 0.5cm;
      background: #fff;
      border-bottom: 1px solid #ccc;
      text-align: center;
    }
    .print-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1cm;
      padding: 0.5cm;
      background: #fff;
      border-top: 1px solid #ccc;
      text-align: center;
    }
    .page-counter::after {
      content: counter(page) " of " counter(pages);
    }
    .print-content {
      margin-top: 2cm;
      margin-bottom: 2cm;
    }
  `;
  iframeDoc.head.appendChild(style);
  
  // Trigger print
  iframe.contentWindow.print();
}

Key Notes #

• Edge's native headers/footers are controlled by user preferences, so you can't force them on via CSS. Custom headers/footers are the only reliable way to ensure consistency.
• The counter(page) and counter(pages) are built-in CSS counters that automatically track page numbers—no JS needed for that!
• Make sure to test the margins and heights to avoid content overlapping with headers/footers.

内容的提问来源于stack exchange，提问作者Piyush