js设置浏览器打印样式，浏览器打印样式制作技巧

1. 浏览器打印样式制作技巧概述

在网页开发中，有时需要将一个网页直接打印或导出成PDF格式，但是网页内嵌的样式，如导航栏、广告等并不需要在打印或导出的版本中出现。这时就需要设置一个专门的浏览器打印样式。本文将介绍使用JS设置浏览器打印样式的技巧。

2. 创建一个专门的打印样式

在网页中，我们可以使用CSS设置不同的样式，同样我们可以创建一个专门的打印样式。我们可以在头部添加<link>标签来引用这个打印样式，例如:

```html

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

```

在这个CSS样式中，我们可以设置需要隐藏或改变的元素，例如:

```css

.navigation{display:none}

.ad{display:none}

.print-header{display:block}

```

3. 根据不同需求设置打印样式

在实际使用中，根据不同的需求，我们也可以设置不同的打印样式。例如，有的时候需要打印的页面中包含表格，我们希望在打印的时候表格可以自动换页，在这种情况下，我们可以添加以下样式：

```css

@media print {

table { page-break-inside:auto }

td { page-break-inside:avoid; page-break-after:auto }

}

```

4. 使用JavaScript设置打印样式

除了使用CSS设置打印样式外，我们还可以使用JavaScript动态地设置打印样式。例如，在用户点击“打印”按钮之后，我们可以动态地生成一个包含打印样式的CSS，然后在页面中加入这个CSS文件来设置打印样式。

以下是一个示例代码：

```javascript

function setPrintStyle() {

var css = "@media print{...}";

var style = document.createElement('style');

style.type = 'text/css';

style.media = 'print';

style.appendChild(document.createTextNode(css));

document.head.appendChild(style);

}

```

5. 打印预览和调试

在设置完打印样式之后，我们可以用浏览器的打印预览功能查看打印的效果。同时也可以使用浏览器的开发者工具来调试打印样式。例如，在Chrome浏览器中，我们可以打开开发者工具 -> 选择“打印预览” -> 选择“模拟CSS媒体类型” -> 选择“print”即可进行调试。

6. 结语

使用JavaScript设置浏览器打印样式是一个比较简单实用的技巧。通过设置打印样式，我们可以打印出更加规整、美观的页面，提高用户的体验。但是要注意，不要出现打印样式与网页样式不一致等问题，同时也要注意打印效果的可读性，避免打印出来的内容出现重叠等问题。

文章TAG：设置  浏览  浏览器  打印  js设置浏览器打印样式