Html code to achieve print form

JS use technology to print an HTML table

Usually when browsing the web, always some unrelated content and content on the page during printing, if the entire page print out, there is always inconvenient. . . So the need to print pages printed page is a little set about the necessary

js code:

　　　　　　　 function preview (Oper) {
                 IF (Oper <10 ) { 
                    bdhtml = window.document.body.innerHTML; // Get html code of this page 
                    sprnstr = "<- startprint!" Oper + + "->"; // setting the printing start area 
                    eprnstr = "<-! EndPrint" Oper + + "->"; // set the print end region 
                    prnhtml = bdhtml.substring (bdhtml.indexOf (sprnstr) +18);  // rearwardly from the start code taking HTML 
                    prnhtml prnhtml.substring = (0, prnhtml.indexOf (eprnstr)); // get the code from the forward end of the HTML 
                    window.document.body.innerHTML = prnhtml;
                    window.print();
                    window.document.body.innerHTML=bdhtml;
                } else {
                    window.print();
                }
            }

Then the code to be printed, with <-! Startprint1 -> and <-! Endprint1 -> surrounded, as follows:

<!--startprint1-->
    <img src="img/Stone.png" alt="" />
    fffffffffffffffffffffffffffffffffff
<!--endprint1-->

Finally, add a print button

<input type="button" name="button_export" title="打印1" onclick="preview(1)" value="打印1"/>

Stated otherwise, inside an HTML page, you can set up multiple print areas, about the need to change just a few figures on OK. Such as:

When selecting the second region by which <-! Startprint2 -> <-! Endprint2 -> surrounded naturally changed and the button corresponding preview (2) a. Print this second area is completed.

Another point is the question of CSS style sheets, and print results are not included in the print background, is setting note. <Style media = "print">, <link media = "print"> reasonable usage applications, media = "print" is not to be displayed in the web page, the effect only on the presence of printing, the printing effects and may be provided not the same as on the page displayed.

style print style written in two ways: 
Method a: 
< style Media = "Print" > 
   .part2 { 
       Color : Blue ; 
   } 
</ style > 
Method II: 
< style > 
   @media Print { 
       .part2 { 
           Color : Black ; 
       } 
   } 
</ style >

final effect:

Overall Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--写法一-->
        <style media="print">
            .part1{
                color: red;
            }
            .part2{
                color: blue;
            }
        </style>
        <!--写法二-->
        <!--<style>
            @media print{
                .part2{
                    color: black;
                }
            }
        </style>-->
    </head>
    <body>
        <!--startprint1-->
        print1print1print1print1print1print1
        <div class="part1"></div>
        <img src="img/Stone.png" alt="" />
        <!--endprint1-->
        <input type="button" name="button_export" title="打印1" onclick="preview(1)" value="打印1"/>
        <br />
        <!--startprint2-->
        print2print2print2print2print2print2
        <div class="part2"></div>
        <img src="img/Doom Bringer.jpg" alt="" />
        <!--endprint2-->
        <input type="button" name="button_export" title="打印2" onclick="preview(2)" value="打印2"/>
        <script>
            function preview(oper){
                if (oper < 10){
                    bdhtml=window.document.body.innerHTML;//获取当前页的html代码
                    sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
                    eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
                    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
                    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
                    window.document.body.innerHTML=prnhtml;
                    window.print();
                    window.document.body.innerHTML=bdhtml;
                } else {
                    window.print();
                }
            }
        </script>
    </body>
</html>

参考文章： https://blog.csdn.net/memgxingfeixiang/article/details/52702820

Html code to achieve print form

Guess you like