默认横向打印失效及仅打印文本框内容问题求助

Let’s break down and fix both your landscape printing problem and the requirement to print only the content entered in text boxes.

1. Fixing Landscape Printing Not Working #

Your original landscape CSS wasn’t taking effect because it wasn’t included in the styles of the popup window you’re using for printing. To resolve this, we need to add the @page rule directly to the styles injected into the print popup. For broader browser compatibility, we’ll also add !important and optionally specify a paper size with orientation:

@media print {
  @page {
    size: landscape !important; /* Forces landscape mode */
    /* Optional: Explicit paper size for better cross-browser support */
    /* size: A4 landscape; */
  }
  /* Keep your existing print styles here */
}

2. Printing Only Input Content (Replace Input Fields with Plain Text) #

Right now, you’re printing the input elements themselves. To print just the text users entered, we’ll replace each input with its current value as plain text before writing it to the popup. Here’s the modified AngularJS code:

$scope.print = function(divName, secondDiv) { 
  $timeout(function () { 
    // Helper function to replace inputs with their text values
    function replaceInputsWithText(html) {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      const inputs = tempDiv.querySelectorAll('input');
      inputs.forEach(input => {
        // Replace input element with its value (empty if no input)
        const textNode = document.createTextNode(input.value || '');
        input.parentNode.replaceChild(textNode, input);
      });
      return tempDiv.innerHTML;
    }

    let printContents = document.getElementById(divName).innerHTML;
    let printContents1 = document.getElementById(secondDiv).innerHTML;
    
    // Process HTML to convert inputs to plain text
    printContents = replaceInputsWithText(printContents);
    printContents1 = replaceInputsWithText(printContents1);

    console.log(printContents); 
    const w = window.open(); 
    w.document.open(); 
    
    $timeout(function(){ 
      w.document.onreadystatechange=function(){ 
        if(this.readyState==='complete'){ 
          this.onreadystatechange=function(){}; 
          w.focus(); 
          w.print(); 
          w.close(); 
        } 
      } 
    },1000); 
    
    w.document.write('<!doctype html><html><head><title></title>');
    w.document.write('<link rel="stylesheet" type="text/css" href="css/main.css" />');
    w.document.write('<link rel="stylesheet" type="text/css" href="css/docs.css" />');
    w.document.write('<link rel="stylesheet" type="text/css" href="css/angular-material.css" />');
    w.document.write('</head><body style="font-size:14px;" >');
    w.document.write(printContents + printContents1); 
    w.document.write('</body></html>'); 
    // Inject updated styles including landscape rule
    w.document.write(`
      <style>
        @media print {
          @page {
            size: landscape !important;
          }
          th,td{
            height:3px!important;
            position:relative;
          }
        }
      </style>
    `);
    w.document.close(); 
  }, 1000); 
}

Key Improvements: #

• Input-to-Text Conversion: The replaceInputsWithText function converts all input elements in your target divs to plain text using their current values, so only user-entered content prints.
• Landscape CSS in Popup: The landscape rule is now included directly in the print popup’s styles, ensuring it applies during the print process.
• Removed Unnecessary Angular Directives: We stripped ng-app and ng-controller from the popup body since we’re printing static text, reducing potential conflicts and overhead.

Additional Notes: #

• Some browsers may still prompt users to confirm landscape mode, but the CSS will set it as the default.
• Test across major browsers (Chrome, Firefox, Edge) to ensure consistent behavior, as print CSS handling can vary slightly.

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