All geek questions in one place

How to print part of a web page, including what was selected

I am trying to print a specific part of a web page. But whenever I try to print it, it does not display the switch that I selected, which is in the text box or what I selected in the drop-down menu. Could you tell me how I can achieve this in the following code

<html>
    <head>       
    <script>
        printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
        function printDiv(divId) {
            window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
            window.frames["print_frame"].window.focus();
            window.frames["print_frame"].window.print();
        }
    </script>
    </head>

    <body>
        <p>Some information that doesn't need to be printed</p>

        <div id="div1">This is the Part that need to be printed<br>
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="other"> Other
        <br>
        <select>
        <option value="empty"> </option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        </select>
        <p>Print out need to show the gender and the car brand I have selected</p>
        </div>        
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
        <b>Click here to Print:</b> <a href="javascript:printDiv('div1')">Print</a><br>
    </body>
</html>

enter image description here

Please show me a sample code

+4
source share
1 answer

You can use this if there is unwanted divjust put @media printand display:none;. As you can see, when you type uwanted-div, and the button does not appear.

@media print
   {
      .unwanted-div, button{
      display:none;  
      }       
   }
<html>
    <body>
        <div class="unwanted-div">
          Some information that doesn't need to be printed</p>
      </div>

        <div id="div1">This is the Part that need to be printed<br>
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="other"> Other
        <br>
        <select>
        <option value="empty"> </option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        </select>
        <p>Print out need to show the gender and the car brand I have selected</p>
        </div>        
        <button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
    window.print();
}
</script>
    </body>
</html>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1668164/

More articles:


All Articles