打印网页组件

Last month my Print Stylesheets Tips & Tricks article on Smashing Magazine received an interesting question: what if a user wants to print individually separate sections of a web page?

上个月，我在Smashing Magazine上的Print Stylesheets Tips＆Tricks文章收到了一个有趣的问题：如果用户想单独打印网页的各个部分怎么办？

The questioner gave a good example: a page that presents multiple recipes (those used in the example above supplied by my student Jenelle Bucholz, from her recent 1^st year site project). The HTML for the recipes would look something like this:

提问给了一个很好的例子：一个页面，呈现多个食谱(那些通过上面提供的示例中使用我的学生Jenelle Bucholz，从她最近的¹年现场项目 )。 配方的HTML如下所示：

<article id="article1">
	<h1>Light New York Cheesecake</h1>
	<h2>Ingredients</h2>
	<h3>Crust</h3>
	<ul>
		<li>⅔ cup all-purpose flour
		…
	</ul>	
</article>
<article id=article2>
	<h1>Zucchini Brownies</h1>
	<h2>Ingredients</h2>
	<ul>
	<li>2 eggs
	<li>1 tbsp. vanilla
	…
	</ul>
</article>

And the default CSS like this:

和默认的CSS像这样：

body {
	display: flex;
	font-family: Edel Sans, Arial, sans-serif;
}
article {
	margin: 0;
	position: relative;
	padding-bottom: 2rem;
}
article img { 
	width: 100%; height: auto;
}
article h1 { 
	line-height: 1.4;
	text-align: center; 
}
article h2 {
	font-size: 1.4rem;
	border-bottom: 2px solid rgb(133,183,174);
	margin: 1rem auto;
	padding: .3rem;
	width: 8rem;
	text-align:  center;
	font-weight: 200;
}
article ul, article ol { 
	font-size: 1.2rem;
	line-height: 1.6; 
}
article ul, article ol { 
	padding-left: 0; 
}
article ol { 
	padding-left: 1rem; 
}
article ul { 
	list-style-type: none; 
}
article button {
	position: absolute;
	bottom: 0; right: 1rem;
	padding: .5rem;
}

(I’m using flexbox for convenience, but there are plenty of alternative ways to place the recipes side-by-side).

(为了方便起见，我使用flexbox ，但是有很多其他方法可以并排放置食谱)。

创建打印按钮 (Creating Print Buttons)

The buttons are inserted at the bottom of each article:

这些按钮插入在每篇文章的底部：

<button>Print recipe</button>

It’s possible to make the each button a simple print action at this stage:

在此阶段，可以使每个按钮成为简单的打印操作：

<button onclick="window.print()">Print recipe</button>

Written that way, the buttons will print out the entire page, but our goal is more ambitious that this. Because I want to keep the code as clean as possible, I’ll do all of the work in JavaScript at the end of the document, rather than inline for each element.

以这种方式编写的按钮将打印出整个页面，但是我们的目标是要做到这一点。 因为我想保持代码尽可能的整洁，所以我将在文档末尾使用JavaScript进行所有工作，而不是对每个元素进行内联。

允许打印选择 (Allowing For Printing Choices)

A visitor will probably want to print out a single recipe for the sake of convenience. In this case, I assume that the site owner wants page components such as <header> elements and comments to print out when the user clicks Print, but no other articles aside from the one associated with the button. As a start, I’ll add the following to the end of the document:

为了方便起见，访客可能希望打印出一个食谱。 在这种情况下，我假设站点所有者希望在用户单击“ 打印”时打印出诸如<header>元素和注释之类的页面组件，但是除了与该按钮关联的文章之外，没有其他文章。 首先，我将在文档末尾添加以下内容：

<script>
function printSection() {
	var parentArticle = this.parentNode,
	articles = document.getElementsByTagName("article");
	for (var i = 0; i < articles.length; i++) {
		if (articles[i] !== parentArticle) { 
			articles[i].style.display = "none";
		}
	window.print();
}
var printRequestors = document.querySelectorAll("article button:last-of-type");
for (var i = 0; i < printRequestors.length; i++) {
	printRequestors[i].addEventListener("click", printSection, false);
}
</script>

Very simply, the script attaches a click event to the last button in each article (we’re assuming that’s the Print button, although we could also identify the buttons with a class to be on the safe side). When a button is clicked, it calls the printSection function, which:

很简单，该脚本将click事件附加到每篇文章的最后一个按钮上(我们假设这是“ 打印”按钮，尽管我们也可以将class标识为安全的按钮)。 单击一个按钮时，它将调用printSection函数，该函数：

• Determines the parent article of that particular button.
  确定该特定按钮的父条款。

• Turns off the display of all other articles.

  关闭所有其他文章的显示。

• Prints the resulting page.
  打印结果页面。

This works, but it leaves the browser window looking like the page that has just printed, i.e. with the other recipes removed. In reality, we want the display: none rule to affect articles only during print, not on the screen. Also, we don’t want the Print button itself to be visible on the printed page.

此方法有效，但它使浏览器窗口看起来像刚刚打印的页面，即删除了其他配方。 实际上，我们希望display: none规则只影响打印期间的文章 ，而不影响屏幕上的文章。 另外，我们不希望“ 打印”按钮本身在打印的页面上可见。

The last part is easy to do, via adding a media query to our main stylesheet:

通过将媒体查询添加到我们的主样式表中，最后一部分很容易做到：

@media print { 
	article button:last-of-type { 
		display: none;
	} 
}

The other goal is a little trickier: unfortunately, we can’t just command JavaScript with parentArticle.print();. But we can create a new style sheet at the end of our document that contains added rules for print. The JavaScript changes to:

另一个目标有些棘手：不幸的是，我们不能仅仅通过parentArticle.print();命令JavaScript parentArticle.print(); 。 但是我们可以在文档的末尾创建一个新的样式表，其中包含添加的打印规则。 JavaScript更改为：

function removePrintStyles() {
	previousExclusions = document.getElementById("printexclusions");
	if (previousExclusions) {
		previousExclusions.parentNode.removeChild(previousExclusions);
	}
function printSection() {
	var css = document.createElement("style"),
	parentArticle = this.parentNode,
	articles = document.getElementsByTagName("article");
	css.id = "printexclusions";
	css.innerHTML += "@media print {\n"
	for (var i = 0; i < articles.length; i++) {
		if (articles[i] !== parentArticle) { 
			css.innerHTML += "#"+articles[i].id + "{ display: none; }\n"; }
		}
	css.innerHTML += "}\n"
	removePrintStyles();
	document.body.appendChild(css);
	window.print();
	removePrintStyles();
}
var printRequestors = document.querySelectorAll("article button:last-of-type");
for (var i = 0; i < printRequestors.length; i++) {
	printRequestors[i].addEventListener("click", printSection, false);
}

In short, the rewritten script creates a new print stylesheet at the bottom of the document, eliminating the presentation of any other recipes when the Print button is clicked; thereafter, if the button for another recipe is clicked, the previous stylesheet is removed and rewritten. The stylesheet is removed after any individual print action, as otherwise it will influence the printing of the entire page, if the user decides to take that route.

简而言之，重写后的脚本会在文档底部创建一个新的打印样式表，从而在单击“ Print按钮时不再显示任何其他配方。 此后，如果单击了另一个配方的按钮，则会删除并重写以前的样式表。 在执行任何单独的打印操作后，将删除样式表，否则，如果用户决定采用该路线，则样式表将影响整个页面的打印。

改进措施 (Improvements)

There are several assumptions in the script: that every <article> element on the page has a unique id; that visitors are using a modern browser (due to the use of document.querySelectorAll and addEventListener), and that JavaScript itself is working. These may not be reasonable assumptions in all cases, but each could be addressed if they were felt to be an issue.

脚本中有几个假设：页面上的每个<article>元素都有唯一的id ； 访问者正在使用现代浏览器(由于使用document.querySelectorAll和addEventListener )，并且JavaScript本身正在运行。 这些可能并非在所有情况下都是合理的假设，但是如果认为每个问题都可以解决，则可以解决每个假设。

翻译自: https://thenewcode.com/873/Printing-Web-Page-Components