打印机qr代码_自动将QR代码添加到网页中，以便从打印副本中轻松链接引用

打印机qr代码

In this author’s humble opinion, most QR Codes are acne in print. However, there are a few places where the ubiquitous digital codes may be appropriate, even useful… one of those being CSS print stylesheets.

在作者的拙见中，大多数QR码都是痤疮。 但是，在一些地方，无处不在的数字代码可能是合适的，甚至有用的……其中之一就是CSS打印样式表。

Previously I’ve shown how to add visible URLs after links on printed web pages. While this works, the technique requires the reader to type in the supplied URL manually. If we provide a QR code instead, the user can easily scan the digital information from the printed page and go directly to the link, as shown below:

以前，我已经展示了如何在打印的网页上的链接后添加可见的URL 。 在此可行的同时，该技术要求读者手动输入提供的URL。 如果改为提供QR码，则用户可以轻松地从打印的页面中扫描数字信息，然后直接转到链接，如下所示：

For this example, I’ll generate a QR code using the Google Charts API. The API has just four required components:

在此示例中，我将使用Google Charts API生成QR码。 该API仅具有四个必需的组件：

Variable	Description
cht	The kind of chart information we want Google to deliver (qr, in our case)
chs	The rendered size of the code, in pixels
chl	The URL to encode into the QR code
choe	The form of character encoding to use

变量	描述
cht	我们希望Google提供的图表信息类型(在本例中为qr )
chs	代码的渲染大小(以像素为单位)
chl	编码为QR码的URL
choe	使用的字符编码形式

The entire query string will take the following format:

整个查询字符串将采用以下格式：

<url>&choe=UTF-8

I’d typically present the QR code at the top of the page, just after the opening <h1> element, which will usually contain a link to the current document. As an example, I’ll use the URL and title for the previous article in this blog.

通常，我会在页面顶部的<h1>元素之后显示QR码，该元素通常包含指向当前文档的链接。 例如，我将使用此博客上一篇文章的URL和标题。

<h1><a href="/613/Create-A-SilkScreen Effect">Create a Silkscreen Effect For Images With CSS3</a></h1>

If your site only consisted of a few pages, you could hardcode the QR code as generated content within an embedded style for each page. Obviously we don't want the QR code to appear on the screen version of the page, so we’ll wrap the QR code generator in an @media print query:

如果您的网站仅由几页组成，则可以将QR码作为生成内容的硬编码形式嵌入到每个页面中。 显然，我们不希望QR码出现在页面的屏幕版本上，因此我们将QR码生成器包装在@media print查询中：

@media print { 
	h1 {
		margin-right: 200px;
		margin-bottom: 2rem;
		line-height: 1.2;
	}
	h1 a:after {
		content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://thenewcode.com/613/Create-A-SilkScreen-Effect&choe=UTF-8);
		position: absolute;
		right: 0; top: 0;
	}
}

The printed result would look like the screenshot at the top of this page. Note that I've provided the <h1> element with a margin on the right side so that long title headings do not print over the absolutely positioned QR code in the top right corner of the page.

打印的结果类似于此页顶部的屏幕截图。 请注意，我在<h1>元素的右侧提供了一个空白，以便长标题标题不会打印在页面右上角绝对定位的 QR码上。

If you had a large site, coding URLs by hand to generate a QR code for each page would be very inefficient. Alternatively, assuming you were using PHP, you could generate the URL of the current page for the Google API while keeping the CSS as an embedded style: <style>

如果您的网站很大，则手动编码URL以为每个页面生成QR码将非常低效。 另外，假设您使用的是PHP ，则可以为Google API生成当前页面的URL，同时将CSS保留为嵌入式样式：<style>

@media print { 
	h1 { 
		margin-right: 200px;
		margin-bottom: 2rem;
		line-height: 1.2;
	}
	h1 a:after {
		content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8);
		position: absolute;
		right: 0; top: 0;
	}
}

These automatically generated QR codes will ensure that visitors can easily return to the appropriate URL of a page by scanning the printed copy, rather than manually entering an easily-mistyped address.

这些自动生成的QR码将确保访问者可以通过扫描打印的副本轻松返回页面的相应URL，而不用手动输入容易输入错误的地址。

翻译自: https://thenewcode.com/614/Add-QR-Codes-To-Web-Pages-Automatically-For-Easy-Link-References-From-Printed-Copies

打印机qr代码