打印文件显示无法连接打印机_打印时显示链接的参考

打印文件显示无法连接打印机

Using print stylesheets are a nice way to enhance a user’s experience of a site. Our screen stylesheets don’t necessarily turn out that nicely when printed out, so using a few different CSS rules on our print stylesheet we can increase readability and usability.

使用打印样式表是增强用户对网站体验的好方法。 我们的屏幕样式表在打印时不一定能很好地显示出来，因此在我们的打印样式表上使用一些不同CSS规则可以提高可读性和可用性。

One of those nice features we can add is to display a link’s href directly after the link on our print-outs. This will allow someone who has printed out the page to still be able to know where the links on the page are pointing to. We can do this with CSS by using the :after psuedo-class and some generated content.

我们可以添加的一些不错的功能之一是，在打印输出上的链接之后直接显示链接的href。 这将使打印出该页面的人仍然能够知道页面上的链接指向的位置。 我们可以使用：after psuedo-class和一些生成的内容来使用CSS来实现。

a[href]:after{
    content: " [" attr(href) "] ";
}

There are really four important parts of the statement above:

上面的声明实际上有四个重要部分：

1. a[href]: Here, we use an attribute selector to select all links in our page with an href attribute.

   a[href] ：在这里，我们使用属性选择器来选择页面中具有href属性的所有链接。

2. :after: The :after pseudo-class allows us to insert some content after the links and style it if necessary.

   :after ：：after伪类允许我们在链接后插入一些内容，并根据需要设置样式。

3. content: This is what actually generates the content. We could just insert, for example, the letter “a” with a style call like content: “a”.

   content ：这实际上是生成内容的原因。 例如，我们可以插入带有样式调用的字母“ a”，例如content：“ a”。

4. attr(href): This gets the href attribute of the link currently being styled. This way, each link will display it’s own href.

   attr(href) ：这将获取当前正在设置样式的链接的href属性。 这样，每个链接将显示其自己的href。

If we put this style in our print stylesheet, all of our links that actually have an href will print out like this: TimKadlec.com [http://www.timkadlec.com]

如果我们在打印样式表中放入此样式，则所有实际上具有href的链接都将像这样打印出来：TimKadlec.com [ http://www.timkadlec.com ]

Obviously, this is a pretty handy enhancement to our print stylesheets. Now, the links printed out actually have some meaning to them. The problem is, Internet Explorer doesn’t support the :after pseudo class, nor does it support the content style. So if a user is using Internet Explorer and tries to print our page out, they still won’t see any href’s displayed.

显然，这是对我们的打印样式表的非常方便的增强。 现在，打印出的链接实际上对其具有一定的意义。 问题是Internet Explorer不支持：after伪类，也不支持内容样式。 因此，如果用户使用Internet Explorer并尝试将我们的页面打印出来，他们仍然看不到显示的href。

救援Javascript (Javascript to the Rescue)

We can use a little bit of browser specific Javascript to fix this problem. Internet Explorer (version 5.0 and up) has a little known proprietary event called onbeforeprint. Just like it sounds, this event fires right before printing a page or viewing a print preview of the page. Since IE is the only major browser that doesn’t create the effect using CSS, a proprietary event is the perfect fix. Now, we can draw up a simple function like so:

我们可以使用一些特定于浏览器的Javascript来解决此问题。 Internet Explorer(5.0及更高版本)具有一个鲜为人知的专有事件，称为onbeforeprint。 就像听起来一样，此事件在打印页面或查看页面的打印预览之前立即触发。 由于IE是唯一无法使用CSS产生效果的主流浏览器，因此专有事件是完美的解决方案。 现在，我们可以绘制一个简单的函数，如下所示：

window.onbeforeprint = function(){
    var links = document.getElementsByTagName("a");
    for (var i=0; i< links.length; i++){
        var theContent = links[i].getAttribute("href");
        if (!theContent == ""){
            links[i].newContent = " [" + theContent + "] ";
            links[i].innerHTML = links[i].innerHTML + links[i].newContent;
        }
    }
}

Our function simply gets all the links on a page, and appends their respective href’s immediately after them, creating the same effect that we were able to do using CSS in other browsers. You might be wondering why we set the new content we created to be a property of each link. That’s because right after printing or canceling out of the print preview screen, we are now seeing the href on our actual web site. We obviously don’t want this, and it’s simple enough to get rid of with another IE proprietary function, onafterprint.

我们的函数仅获取页面上的所有链接，并在其后立即附加各自的href，从而产生与我们在其他浏览器中使用CSS相同的效果。 您可能想知道为什么我们将新创建的内容设置为每个链接的属性。 这是因为在打印或取消打印预览屏幕后，我们现在在实际网站上看到了href。 我们显然不希望这样做，并且它很简单，可以摆脱另一个IE专有功能onafterprint。

window.onafterprint = function(){
    var links = document.getElementsByTagName("a");
    for (var i=0; i< links.length; i++){
        var theContent = links[i].innerHTML;
        if (!theContent == ""){
            var theBracket = theContent.indexOf(links[i].newContent);
            var newContent = theContent.substring(0, theBracket);
            links[i].innerHTML = newContent;
         }
    }
}

Here we just again, loop through all the links, find the position of the new content we added, and remove it from the link. This returns the appearance of our site to the original view before trying to print.

在这里，我们再次循环浏览所有链接，找到我们添加的新内容的位置，然后将其从链接中删除。 在尝试打印之前，这会将我们网站的外观恢复为原始视图。

Obviously, it would be ideal if we could simply use CSS to manage this. However, as we’ve seen, there is no need to wait for IE to support this feature before we implement it. Some proprietary Javascript events allow us to replicate the effect until it is supported later on.

显然，如果我们可以简单地使用CSS来管理它，那将是理想的。 但是，正如我们所看到的，在实现它之前，无需等待IE支持此功能。 一些专有的Javascript事件使我们能够复制效果，直到稍后支持它为止。

The script/css effect has been tested in IE7, Opera, Firefox, and Safari. If you are interested, the complete Javascript to create the effect in IE is here: printlinks.js

脚本/ css效果已经在IE7，Opera，Firefox和Safari中进行了测试。 如果您感兴趣，可以在IE中创建效果的完整Javascript： printlinks.js

翻译自: https://timkadlec.com/2008/01/display-a-links-href-when-printing/

打印文件显示无法连接打印机