js控制浏览器打印方向，JavaScript 控制浏览器打印方向

1. 介绍

在很多场合，我们需要将网页打印下来，比如收据、合同、简历等等。但是当我们选择打印时，我们会发现打印的方向不是我们期待的方向。这时，我们就需要通过 JavaScript 控制浏览器打印方向，确保打印的方向与我们期望的一致。

2. 控制打印方向的方法

控制打印方向的核心是使用 CSS3 中的 @page 声明。通过 @page 声明，我们可以设置打印时的一系列参数，如纸张大小、页面方向、页边距等等。以下是一个控制打印方向的示例：

```css

@media print {

@page {

size: landscape;

margin: 0;

}

body {

transform: rotate(90deg);

}

}

```

其中，@media print 表示样式将应用于打印模式下的页面。@page 表示打印的页面设置，size 表示纸张方向，可以设置 landscape（横向）或 portrait（纵向）；margin 表示页面的边距，可以设置为任意值。body 元素的 transform 属性则是通过 CSS3 的旋转变换将页面旋转 90 度，达到横向打印的目的。

3. 针对不同浏览器的兼容性问题

虽然 @page 声明在 CSS3 中已经被正式纳入标准，但是不同浏览器对其的支持并不一致。在实际开发中，我们需要针对不同浏览器的兼容性问题进行处理。以下是一些常见的处理方法：

- Chrome 和 Safari 中需要将 margin 设置为 0，才能达到预期效果；

- Firefox 中有一个叫做 margin-top 交错问题，需要将 margin-top 设置为 0、2、4、6、8 等偶数值，才能达到预期效果；

- IE 浏览器中对 @page 声明的支持非常有限，可以考虑使用专门的 IE 打印样式表，通过 JS 动态修改样式表。

4. 控制网页自适应打印

除了控制打印方向外，我们还可以通过 JavaScript 控制网页自适应打印。具体来说，自适应打印是指在不同的纸张大小下，自动调整网页的大小和排版，以便于更好地适应不同的打印需求。

实现自适应打印的核心是 JavaScript 中的 onbeforeprint 事件和 onafterprint 事件。其中，onbeforeprint 事件表示打印开始前执行的脚本，onafterprint 事件表示打印结束后执行的脚本。以下是一个自适应打印的示例：

```js

window.onbeforeprint = function() {

var body = document.body;

body.style.width = "21cm";

body.style.height = "29.7cm";

body.style.margin = "0 auto";

body.style.fontFamily = "SimSun";

};

window.onafterprint = function() {

var body = document.body;

body.style.width = "";

body.style.height = "";

body.style.margin = "";

body.style.fontFamily = "";

};

```

其中，onbeforeprint 事件将 body 元素的宽度设置为 A4 纸张的宽度，高度设置为 A4 纸张的高度，边距设置为居中，字体设置为宋体。onafterprint 事件将这些样式设置还原。通过这种方式，我们可以在无需手动设置打印纸张大小的情况下，实现良好的打印效果。

5. 总结

通过 JavaScript 控制浏览器打印方向，我们可以更加方便地在不同的场合下实现良好的打印效果。具体来说，需要使用 CSS3 中的 @page 声明进行设置，注意不同浏览器的兼容性问题；此外，还可以通过 JavaScript 实现网页自适应打印。

文章TAG：js控制浏览器打印方向  JavaScript  控制浏览器打印方向