javascript modification before printing

JavaScript is a scripting language widely used in web applications. In the process of web development, printing function is essential, but simply using the browser's printing function may lead to unsatisfactory results. Therefore, this article will introduce how to modify the style and content of the printed page in JavaScript to achieve better printing effects.

1. Modify the style

1. Use @media media query

@media media query refers to using @media rules in the style sheet to make the style sheet only for specific Media type devices take effect. Before printing, we can use @media rules to modify the style of the printed page so that the printed page is more suitable.

The sample code is as follows:

@media print {
  /* 在这里定义修改的样式 */
}

In the above code, @media print indicates that we want to modify the media type used by the printer, where we can add various styles, such as setting the background color:

@media print {
  body {
    background-color: #fff;
  }
}

In this example, we set the background color of the printed page to white.

In the @media rule, we can also add other styles, such as setting the page size and direction:

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

In the above code, the @page rule is used to set the page size and direction, The size attribute is used to set the page size, and portrait indicates that the page orientation is vertical.

2. Use a print style sheet

A print style sheet refers to a special style sheet that contains styles specially prepared for printing. We can use this to modify the style of the printed page before printing.

The sample code is as follows:

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

In the above code, we introduced a style sheet named print.css in the HTML file and set the media attribute of the style sheet to print .

In the print.css style sheet, we can add styles specially prepared for printing, for example:

body {
  font-size: 12pt;
  line-height: 1.5;
}

In the above code, we set the font size of the printed page to 12pt, Row height is set to 1.5.

Using a print style sheet can make style modifications more flexible without affecting the original style.

2. Modify the content

1. Hide unnecessary elements

In printed pages, we usually do not need to display some elements, such as menus, advertisements, etc. These elements It will waste paper and affect the printing effect. Therefore, we can use JavaScript to hide these elements before printing.

The sample code is as follows:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

In the above code, we first obtain a button with the ID printBtn and bind a click event to it. In the event handler, we hide the two elements with id menu and ad by setting their display attribute to 'none' via JavaScript. Next, we perform a print operation, and then set the display attribute of these elements to 'block' after printing, thereby restoring their display.

It is worth noting that hiding elements before printing can make the printing effect cleaner, but when implementing the function, you must pay attention that the hidden elements will not affect other functions of the page.

2. Add print headers and footers

Print headers and footers usually include some important information, such as printing time, file name, etc. We can use JavaScript to add print headers and footers before printing.

The sample code is as follows:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

In the above code, we first obtain a button with the ID printBtn and bind a click event to it. In the event handler, we added the print header and footer respectively via JavaScript. Among them, the insertAdjacentHTML() method is used to insert HTML code at a certain location in the document. beforebegin means inserting before the current element, and afterend means inserting after the current element. We have used beforebegin and afterend respectively here to add the header and footer to the correct place.

Next, we performed the printing operation, and then after the printing was completed, we used JavaScript to delete the printing header and footer from the document to avoid affecting other functions.

Summary

Modifying the style and content of the printed page through JavaScript can make the printing effect more ideal and improve the user experience. When implementing functions, we need to pay attention to the compatibility and usability of the page and avoid unnecessary problems as much as possible.

The above is the detailed content of javascript modification before printing. For more information, please follow other related articles on the PHP Chinese website!