How to remove header and footer in javascript printing

In practical applications, we often need to print some information or content, but when printing, the system will add headers and footers by default, which often disrupts our typesetting and layout and brings us A lot of trouble. So how can you remove the header and footer? Below we will introduce how to remove headers and footers using JavaScript.

1. Remove the header

When printing the page, we can remove the header through the style sheet. The code is as follows:

@media print{
  @page {
    size: auto; /* 使用打印纸张的大小，默认是auto*/
    margin: 0mm; /* 打印页面边缘设置为0 */
    mso-header: none; /* 去除页眉 */
  }
}

In this code, we Use @media print to tell the browser that this code is for printing, and use @page to set the style of the printed page, in which margin is set to 0, that is, the edges of the printed page are set to 0, so that The printed content fills the entire page without adding the white margins set by the system by default. Most importantly, with mso-header:none, we successfully removed the header.

2. Remove the footer

Let us continue to look at how to remove the footer. Here, we can also adjust the style sheet to achieve the effect. The code is as follows:

@media print{
  @page {
    size: auto;
    margin: 0mm;
    mso-header: none;
    mso-footer: none; /* 去除页脚 */
  }
}

Same as removing the header, we add mso-footer:none to stop the system from displaying the footer. It should be noted here that because different browsers have different settings, some browsers may need to use different codes to control the printing effect.

Summary

The above is how to use JavaScript to remove the header and footer from the printed page. In practical applications, we can trigger the print event by adding a button on the page, and we can also add some validation logic to prevent invalid print requests. Through these methods, we can control the printing effect more flexibly so that the printed content can meet our expectations.

The above is the detailed content of How to remove header and footer in javascript printing. For more information, please follow other related articles on the PHP Chinese website!