VB.NET中DataGridView自动横竖版打印及自适应设置技术问询

Got it, let's tackle this print problem head-on—this is such a common pain point for dynamic data tables, and we can build exactly what you need with CSS print media queries and a touch of JavaScript. Here's a step-by-step implementation tailored to your requirements:

1. Basic HTML Structure #

First, let's set up a flexible container with your header, dynamic table, and optional footer:

<div class="print-container">
  <!-- Print-only header -->
  <header class="print-header">
    <h2>Customer Receipt</h2>
    <p>Date: <span id="receipt-date">2024-05-20</span></p>
  </header>

  <!-- Your dynamic data table -->
  <table id="data-table">
    <thead>
      <tr>
        <!-- Dynamic header columns will go here -->
      </tr>
    </thead>
    <tbody>
      <!-- Dynamic data rows will populate here -->
    </tbody>
  </table>

  <!-- Optional print-only footer -->
  <footer class="print-footer">
    <p>Page <span class="current-page"></span> of <span class="total-pages"></span></p>
    <p>Thank you for your business!</p>
  </footer>
</div>

2. Core CSS Print Styles #

We'll use @media print to target print-specific styling, handle page breaks, and set up our adaptive rules:

/* Hide print-only elements on screen */
.print-header, .print-footer {
  display: none;
}

@media print {
  /* Hide all non-print content */
  body * {
    visibility: hidden;
  }
  .print-container, .print-container * {
    visibility: visible;
  }
  .print-container {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 1in; /* Match standard print margins */
    width: calc(100% - 2in);
  }

  /* Prevent table rows from splitting across pages */
  table {
    page-break-inside: avoid;
    width: 100%;
    border-collapse: collapse;
  }
  tr {
    page-break-inside: avoid;
  }
  th, td {
    border: 1px solid #333;
    padding: 4px 8px;
  }

  /* Show header/footer for print */
  .print-header {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #000;
  }
  .print-footer {
    display: block;
    position: fixed;
    bottom: 1in;
    width: calc(100% - 2in);
    text-align: center;
    font-size: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid #000;
  }
}

3. Auto Portrait/Landscape + Font Scaling #

This is where we make the magic happen. We'll use JavaScript to detect column count, then toggle a class on our container to switch page orientation. We'll also use CSS variables to auto-scale fonts based on column count:

CSS Additions #

@media print {
  /* Default portrait mode */
  .print-container.portrait {
    transform: scale(1);
  }

  /* Landscape mode for wide tables */
  .print-container.landscape {
    width: calc(100vh - 2in);
    transform: rotate(90deg) scale(1);
    transform-origin: top left;
    margin-top: calc(100vw - 2in); /* Adjust position after rotation */
  }

  /* Auto-scale font to fit columns */
  #data-table {
    --base-font-size: 14px;
    font-size: min(
      var(--base-font-size),
      calc((100% / var(--column-count)) * 1.2)
    );
  }
}

JavaScript Logic #

Add this script to detect column count and apply the correct orientation/scaling:

function configurePrintLayout() {
  const table = document.getElementById('data-table');
  const columnCount = table.querySelectorAll('thead tr th').length;
  const printContainer = document.querySelector('.print-container');

  // Set CSS variable for font scaling
  document.documentElement.style.setProperty('--column-count', columnCount);

  // Adjust this threshold based on your column width needs (e.g., >6 columns = landscape)
  const landscapeThreshold = 6;

  if (columnCount > landscapeThreshold) {
    printContainer.classList.add('landscape');
    printContainer.classList.remove('portrait');
  } else {
    printContainer.classList.add('portrait');
    printContainer.classList.remove('landscape');
  }
}

// Run when page loads and before print starts
document.addEventListener('DOMContentLoaded', configurePrintLayout);
window.addEventListener('beforeprint', configurePrintLayout);

4. Multi-Page & Page Numbering #

For page numbers, CSS counters work for basic current page counts, but for total pages, JavaScript is more reliable (since CSS can't easily access total page count):

CSS Page Counter #

Add this to your @media print block:

@page {
  counter-increment: page;
  /* Show current page in top-right */
  @top-right {
    content: "Page " counter(page);
    font-size: 0.8rem;
  }
}

Quick Tips to Fine-Tune #

• Adjust the landscapeThreshold in JS to match your column width (e.g., if your columns are very wide, use 4 instead of 6)
• Tweak the font scaling calculation (calc((100% / var(--column-count)) * 1.2)) to make text smaller/larger as needed
• Test in multiple browsers (Chrome, Firefox, Safari) since print rendering can vary slightly

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