C# develops a print version of a web page

In a project, there is a requirement to print product pages. However, the printed version is not consistent with the version on the web page. Some pictures are not needed. The content displayed in the tab tab on the web page needs to be seen on the printed page.. etc.

CSS introduces a @media rule for this requirement. The @media rule allows you to specify different css styles according to different media. @media print refers to the css style of the print version

@media screen    // style of screen 
{
    p.bodyCss {font-family: arial;}
}

@media print // print style 
{
   p.bodyCss {font-family: serif;}

}

@media screen, print
{
   p.bodyCss {font-size: 15pt}
}

In the above example, for the bodyCss style of p, the font displayed on the page (screen style) and printed (print style) are different, but the font size is the same

You can also refer to a special external style for printing print styles specifically

<link rel="stylesheet" type="text/css" media="print" href="css/printpage.css">

You can also use the form that includes css directly in the page

<style type="text/css" media="print">
       .noprint {display = none}
</style>
Add class = " noprint " 
to the parts that do not need to be displayed when printing on the web page

 

After setting the css that needs to print the content, we usually add a button to the page, and the content above the button is "Print this Page". When this button is clicked, the page will be printed. This is achieved through javascript

<script type="text/javascript">

   function printpage()
  {

      window.print();

   }


</script>