javascript是一种脚本语言，广泛应用于 web 应用程序中。在 web 开发过程中，打印功能是必不可少的，但仅仅简单地使用浏览器的打印功能，可能会导致不理想的效果。因此，本文将介绍如何在 javascript 中修改打印页面的样式和内容，以达到更好的打印效果。
一、修改样式
1.使用@media媒体查询
@media媒体查询是指在样式表中使用@media规则，使得样式表只对特定媒体类型的设备生效。在打印之前，我们可以使用@media规则修改打印页面的样式，以便打印页面更加合适。
示例代码如下：
立即学习“Java免费学习笔记（深入）”；
@media print {
/* 在这里定义修改的样式 */
}在上述代码中，@media print表示我们要针对打印机使用的媒体类型进行修改，可以在其中添加各种样式，例如设置背景颜色：
@media print {
body {
background-color: #fff;
}
}在这个例子中，我们将打印页面的背景颜色设置为白色。
在@media规则中，我们还可以添加其它的样式，例如设置页面尺寸和方向：
@media print {
@page {
size: A4 portrait; /* 竖向A4页面 */
}
}在上述代码中，@page规则用来设置页面尺寸和方向，size属性用来设置页面大小，portrait表示页面方向为竖向。
2.使用打印样式表
打印样式表是指一个特殊的样式表，它包含了专门为打印而准备的样式。我们可以在打印之前使用它来修改打印页面的样式。
示例代码如下：
立即学习“Java免费学习笔记（深入）”；
<link rel="stylesheet" href="print.css" media="print" />
在上述代码中，我们在HTML文件中引入了一个名为print.css的样式表，并将该样式表的media属性设置为print。
在print.css样式表中，我们可以添加专门为打印而准备的样式，例如：
body {
font-size: 12pt;
line-height: 1.5;
}在上述代码中，我们将打印页面的字体大小设置为12pt，行高设置为1.5。
使用打印样式表可以使得样式的修改更加灵活，不会影响到原有的样式。
二、修改内容
1.隐藏不必要的元素
在打印页面中，我们通常不需要显示一些元素，例如菜单、广告等，这些元素会浪费纸张并影响打印效果。因此，我们可以在打印之前使用JavaScript将这些元素隐藏。
示例代码如下：
立即学习“Java免费学习笔记（深入）”；
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';
}
}在上述代码中，我们首先获取了一个id为printBtn的按钮，并为它绑定了一个click事件。在事件处理程序中，我们通过JavaScript将id为menu和ad的两个元素的display属性设置为'none'，从而隐藏了这些元素。接着，我们执行了打印操作，然后在打印完成后再将这些元素的display属性设置为'block'，从而恢复了它们的显示。
值得注意的是，在打印之前隐藏元素可以使得打印效果更加干净，但在功能实现时一定要注意隐藏的元素不会影响到页面的其它功能。
2.添加打印页眉和页脚
打印页眉和页脚通常包括一些重要的信息，例如打印时间、文件名等。我们可以使用JavaScript在打印之前添加打印页眉和页脚。
示例代码如下：
立即学习“Java免费学习笔记（深入）”；
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();
}
}在上述代码中，我们首先获取了一个id为printBtn的按钮，并为它绑定了一个click事件。在事件处理程序中，我们通过JavaScript分别添加了打印页眉和页脚。其中，insertAdjacentHTML()方法用来在文档中的某个位置插入HTML代码，beforebegin表示在当前元素前插入，afterend表示在当前元素后插入。我们在这里分别使用了beforebegin和afterend，以便将页眉和页脚添加到正确的位置。
接着，我们执行了打印操作，然后在打印完成后再通过JavaScript将打印页眉和页脚从文档中删除，以免对其它功能产生影响。
总结
通过JavaScript修改打印页面的样式和内容，可以使得打印效果更加理想，提高用户体验。在功能实现时，我们需要注意页面的兼容性和可用性，尽可能地避免产生不必要的问题。
