Skip to content

Commit

Permalink
[zh-cn] update 'Printing' (#18104)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
jasonren0403 and yin1999 authored Jan 31, 2024
1 parent 6210baf commit 82dbbba
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions files/zh-cn/web/css/css_media_queries/printing/index.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
---
title: 打印
slug: Web/CSS/CSS_media_queries/Printing
l10n:
sourceCommit: f7daf15512ea736498837b68bcc36d82d6a323f4
---

{{CSSRef}}

有时,你的网站或应用程序可能希望改善用户在打印内容时的体验。有几种可能的情况:

- 你希望根据纸张的大小和形状调整布局。
- 你希望使用不同的样式来增强纸上内容的外观。
- 你希望使用更高分辨率的图像以获得更好的效果。
- 你想调整打印的用户体验,比如在打印开始前呈现一个特殊格式的内容版本。

你可能还希望管理打印过程的其他情况,但这些都是最常见的场景。本文提供了一些提示和技术帮助你更好地打印 web 内容
你可能还希望管理打印过程的其他情况,但这些都是最常见的场景。本文提供了帮助你更好地打印 web 内容的技巧和方法

## 使用打印样式表

Expand All @@ -22,9 +26,9 @@ slug: Web/CSS/CSS_media_queries/Printing

## 使用媒体查询和 @page 改善布局

你可以使用 CSS {{cssxref("@media")}} at 规则为网页设置打印在纸上和显示在屏幕上时的不同外观。`print` 选项可以设置打印内容时使用的样式
你可以使用 CSS {{cssxref("@media")}} at 规则为网页设置打印在纸上和显示在屏幕上时的不同外观。`print` [媒体类型](/zh-CN/docs/Web/CSS/@media#媒体类型)可以设置要打印的媒体使用的样式,这些样式将仅用于印刷内容

将其添加到你的样式表末尾。请注意,特殊性和优先级规则仍然适用
将其添加到你的样式表末尾。请注意,[优先级](/zh-CN/docs/Web/CSS/Specificity)规则仍然适用

```css
@media print {
Expand All @@ -37,11 +41,11 @@ slug: Web/CSS/CSS_media_queries/Printing
}
```

你还可以使用 {{cssxref("@page")}} at 规则修改打印页面的外观,包括页面的尺寸、方向和边距。`@page` at 规则可用于定位打印输出中的所有页面或页面的特定子集
你还可以使用 {{cssxref("@page")}} at 规则修改打印页面的外观,包括页面的尺寸、方向和边距。`@page` at 规则可用于定位打印输出中的所有页面或特定的页面子集

## 检测打印请求

浏览器发送 {{domxref("Window/beforeprint_event", "beforeprint")}} 和 {{domxref("Window/afterprint_event", "afterprint")}} 事件让内容确定打印何时发生。你可以用它来调整打印过程中显示的用户界面(例如在打印过程中显示或隐藏用户界面元素)。
浏览器发送 {{domxref("Window/beforeprint_event", "beforeprint")}} 和 {{domxref("Window/afterprint_event", "afterprint")}} 事件,以确定打印何时发生。你可以用它来调整打印过程中显示的用户界面(例如在打印过程中显示或隐藏用户界面元素)。

## 示例

Expand All @@ -57,7 +61,7 @@ window.addEventListener("afterprint", () => self.close);

### 无需打开弹出窗口即可打印外部页面

如果你想在不打开弹窗的情况下打印外部页面,可以使用隐藏的 {{HTMLElement("iframe")}} 元素(请参阅[HTMLIFrameElement](/zh-CN/docs/Web/API/HTMLIFrameElement)),在用户打印其内容后自动将其移除。下面是一个可能的示例,它将打印一个名为 `externalPage.html` 的文件:
如果你想在不打开弹窗的情况下打印外部页面,可以使用隐藏的 {{HTMLElement("iframe")}} 元素(参见[HTMLIFrameElement](/zh-CN/docs/Web/API/HTMLIFrameElement)),在用户打印其内容后自动将其移除。下面是一个可能的示例,它将打印一个名为 `externalPage.html` 的文件:

#### HTML

Expand Down

0 comments on commit 82dbbba

Please sign in to comment.