A teeny-tiny javascript library that made printing from the web incredibly simple.

一个很小的javascript库，使从网络打印变得异常简单。

Print.js was primarily written to help us print PDF files directly within our apps, without leaving the interface, and no use of embeds. For unique situations where there is no need for users to open or download the PDF files, and instead, they just need to print them. One scenario where this is useful, for example, is when users request to print reports that are generated on the server-side. These reports are sent back as PDF files. There is no need to open these files before printing them. Print.js offers a quick way to print these files within our apps.

Print.js的主要目的是帮助我们直接在我们的应用程序中打印PDF文件，而无需离开界面，也不使用嵌入。 对于不需要用户打开或下载PDF文件的独特情况，他们只需要打印即可。 例如，当用户请求打印服务器端生成的报告时，这种方法很有用。 这些报告以PDF文件的形式发送回。 无需在打印之前打开这些文件。 Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。

1)下载并安装 (1) Download and Install)

You can either download the latest version(v1.2.0) of Print.js from the GitHub releases or use one of the two steps given below depending on your package manager.

您可以从GitHub版本下载Print.js的最新版本( v1.2.0 )，也可以根据软件包管理器使用以下两个步骤之一。

• To install using npm:
  要使用npm安装：

npm install print-js --save

• To install using yarn:
  要使用纱线安装：

yarn add print-js

After installing via npm or yarn, you should import the library into your project, as shown below, prior to starting using it.

通过npm或yarn安装后，应在开始使用之前将库导入到项目中，如下所示。

import print from 'print-js'

2)入门 (2) Getting Started)

• First, we need to include the Print.js library on the page:
  首先，我们需要在页面上包含Print.js库：

<script src="print.js"></script>

• If you will use the modal feature, also include Print.css on the page:
  如果要使用模式功能，请在页面上也包括Print.css：

<link rel="stylesheet" type="text/css" href="print.css">

That’s it. You can now use Print.js in your pages.

而已。 现在，您可以在页面中使用Print.js。

When writing your javascript code, remember that the library occupies a global variable of printJS.

在编写JavaScript代码时，请记住该库占用了一个printJS全局变量。

3)使用Print.js (3) Using Print.js)

Now, that we have correctly installed and imported the library let’s start using it.

现在，我们已经正确安装并导入了库，让我们开始使用它。

The 4 types of documents you can print using Print.js:

您可以使用Print.js打印的4种类型的文档：

i) PDF (Default)

i)PDF (默认)

Its basic usage is to call printJS() and just pass in a PDF document URL:

它的基本用法是调用printJS()并仅传递PDF文档URL：

printJS('docs/PrintJS.pdf')

ii) HTML

ii)HTML

To print HTML elements, in a similar way, pass in the element id and type:

要以类似方式打印HTML元素，请传入元素ID并输入：

printJS('myElementId', 'html')

iii) IMAGE

iii)影像

For image files, the idea is the same, but you need to pass a second argument:

对于图像文件，想法是相同的，但是您需要传递第二个参数：

printJS('images/PrintJS.jpg', 'image')

iv) JSON

iv)JSON

When printing JSON data, pass in the data, type, and the data properties that you want to print:

在打印JSON数据时，传入数据，类型和要打印的数据属性：

printJS(         {           printable: myData,            type: 'json',            properties: ['prop1', 'prop2', 'prop3']         });

4)例子 (4) Examples)

Enough of the theory, let’s now look at some useful illustrations on how we can use this library to get some good printing work done on our webpage:

有了足够的理论，现在让我们看一些有用的插图，说明如何使用该库在网页上完成一些好的打印工作：

1. Print an HTML Form

1.打印HTML表单

Print.js accepts an object with arguments. Let’s print an HTML form with a customized heading now :

Print.js接受带有参数的对象。 让我们现在打印带有自定义标题HTML表单：

演示地址

2. Print Images

2.打印图像

To print multiple images together, we can pass an array of images. We can also pass the style to be applied to each image :

要一起打印多个图像，我们可以传递一个图像数组。 我们还可以传递要应用于每个图像的样式：

演示地址

3. Print JSON Data

3.打印JSON数据

演示地址

4. Print Styled JSON Data

4.打印样式化的JSON数据

We can now add custom styles to our data table as well as customize the table header text by sending an object array :

现在，我们可以向数据表添加自定义样式，并通过发送对象数组来自定义表头文本：

演示地址

5. Handle Error while Printing PDF

5.打印PDF时处理错误

You could also handle errors using the onError() method provided by print.js and display them to the users using alerts as shown in the example below:

您还可以使用print.js提供的onError()方法处理错误，并使用警报将其显示给用户，如下例所示：

演示地址

5)浏览器兼容性(5) Browser Compatibility)

Since print.js is a fairly new library, therefore, currently, not all library features are working between browsers. However, most of the leading browsers support all of the document types that this amazing library allows us to print. Below are the results of tests done with these major browsers, using their latest versions:

由于print.js是一个相当新的库，因此，当前，并非所有库功能都在浏览器之间运行。 但是，大多数领先的浏览器都支持该惊人的库允许我们打印的所有文档类型。 以下是使用这些主要浏览器的最新版本进行的测试结果：

The tests were done using a cross-browser testing tool provided by BrowserStack.

测试是使用BrowserStack提供的跨浏览器测试工具完成的。

So, that’s it about this useful Javascript library. I hope the information provided in this article provides value to you and helps you simplify and optimize the future printing tasks on your web app.

所以，就是关于这个有用的Javascript库。 希望本文中提供的信息能为您带来价值，并帮助您简化和优化Web应用程序中将来的打印任务。