使用JavaScript更好地链接打印网页

最新推荐文章于 2023-08-09 18:42:38 发布

cungui5726

最新推荐文章于 2023-08-09 18:42:38 发布

阅读量199

点赞数

文章标签： css html js javascript java ViewUI

原文链接：https://thenewcode.com/1186/Better-Links-for-Printed-Web-Pages-with-JavaScript

版权

In the world of print stylesheets, there’s long been a fairly well-established technique for expanding link URLs inline in body text, and printing them inline. The result works, but it breaks the reading flow of the text. A better solution has been around for at least a century in typesetting: the footnote. The challenge is creating and inserting the footnotes, which must be done with JavaScript.

在打印样式表的世界中，一直存在一种相当完善的技术，用于在正文文本中内联扩展链接URL并内联打印。结果有效，但它破坏了文本的阅读流程。至少一个世纪以来，一个更好的解决方案是：脚注。挑战在于创建和插入脚注，必须使用JavaScript来完成。

This short tutorial will show how to capture print events with JavaScript and insert dynamic content exclusively for printers, while being invisible in the browser window.

这个简短的教程将展示如何使用JavaScript捕获打印事件并专门为打印机插入动态内容，同时在浏览器窗口中将其隐藏。

播种页面 (Seeding The Page)

Let’s assume that our page content is inside an <article> tag:

假设我们的页面内容在<article>标记内：

<article>
  <p>Prairie dogging. <a href="http://thenewcode.com">Table the discussion</a> pull 
  in ten extra bodies to help roll the tortoise win-win-win data-point we want to 
  see more charts we need a <a href="http://codepen.io">paradigm shift</a>…
</article>

To this I’ll add some fairly standard CSS:

为此，我将添加一些相当标准的CSS ：

article {
  max-width: 40rem;
  margin: 3rem auto 0;
}
article p {
  font-size: 1.4rem;
  line-height: 1.5;
}
article a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
}

The footnotes will be added inline with the <sup> element, and their explanations added below the article inside a footer. Both of these are set up in the CSS, and made invisible by default:

脚注将与<sup>元素内联添加，其说明也将添加到文章中的footer 。两者都在CSS中设置，默认情况下不可见：

article sup { 
  line-height: 0;
  padding-left: .2rem;
  font-size: 1rem;
}
sup, footer { 
  display: none;
}

They are visible in a print event, written in a @media query:

它们在打印事件中可见，用@media查询编写：

@media print {
  sup { display: inline; }
  footer { display: block; }
}

The first goal of our JavaScript, added below the HTML content, is to select that element:

添加到HTML内容下方JavaScript的首要目标是选择该元素：

let article = document.querySelector("article");

Then we need to detect a print event. To do so, we’ll use JavaScript’s equivalent to CSS’s @media, matchMedia:

然后，我们需要检测打印事件。要做到这一点，我们将使用JavaScript的相当于CSS的@media ， matchMedia ：

let printEvent = window.matchMedia("print");

Below that, we’ll add an event listener that listens for a print event, adds a printed class to the <body>, goes through the links in the <article>, adds incremental numbers after each link, and adds the same number in the <footer>, with the expanded link:

在此之下，我们将添加一个事件侦听器，该侦听器侦听打印事件，将printed 类添加到<body> ，遍历<article>链接，在每个链接之后添加增量编号，并在其中添加相同编号<footer> ，带有展开的链接：

printEvent.addListener(function(mql) {
   if (mql.matches && !document.body.matches(".printed")) {
    document.body.classList.add("printed");
    let articleLinks = article.getElementsByTagName("a");
      if (articleLinks.length > 0) {
        var footer = document.createElement("footer");
        article.appendChild(footer);
        var footnotes = document.createElement("ol");
        for (let i = 0; i < articleLinks.length; i++) {
          articleLinks[i].innerHTML += "<sup>"+(i + 1)+"</sup>";
          var footnote = document.createElement("li");
          footnote.innerText = articleLinks[i].href;
          footnotes.appendChild(footnote);
         }
        footer.appendChild(footnotes);
      }
   }  
});

测试结果 (Testing The Result)

There’s an obvious problem with the script, in the sense that it appears it can only be tested by printing the web page. That’s not actually true; there’s several possible ways of testing the result without killing trees:

该脚本存在一个明显的问题，即从某种意义上说，只能通过打印网页来对其进行测试。这实际上不是真的。有几种不破坏树木就可以测试结果的方法：

Change the event or CSS: you could change the initiating event to almost anything, and comment out the CSS media query, to make the result visible in the browser, as I did in the example at the top of this article.
更改事件或CSS：您可以将启动事件更改为几乎所有内容，并注释掉CSS媒体查询，以使结果在浏览器中可见，就像我在本文顶部的示例中所做的那样。
Without changing anything, test the result in a browser that provides a print preview, such as Chrome.
在不做任何更改的情况下，请在提供打印预览的浏览器(例如Chrome)中测试结果。
In Chrome’s Developer Tools, use More Tools / Rendering from the side menu and place the page to emulate CSS print media.
在Chrome的开发人员工具中，从侧面菜单使用“ 更多工具/渲染” ，然后放置页面以模拟CSS打印介质。