javascript文档_用javascript print js打印文档的最简单方法-程序员宅基地

技术标签: ViewUI  python  java  linux  js  javascript  

javascript文档

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

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

Image for post
Photo by Florian Klauer on Unsplash
Florian KlauerUnsplash拍摄的照片

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表单:

Print HTML Form with Heading Using Print.js
使用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 :

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

Print Multiple Styled Images together Using Print.js
使用Print.js一起打印多个样式的图像

3. Print JSON Data

3.打印JSON数据

Print JSON data as a table Using Print.js
使用Print.js将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 :

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

Print Styled JSON data as a table
将样式化的JSON数据打印为表格

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()方法处理错误,并使用警报将其显示给用户,如下例所示:

Print.js Error handling
Print.js错误处理

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应用程序中将来的打印任务。

翻译自: https://levelup.gitconnected.com/the-easiest-way-to-print-documents-with-javascript-print-js-cd512594a98c

javascript文档

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_26748899/article/details/109123287

智能推荐

造数据时踏过的坑-程序员宅基地

文章浏览阅读44次。1.在产生随机数时,在数据规模很大的时候很难出现自己要的模型,比如某个条件的数据量,此时要写一个方法,来造一批这样的数据2.将控制数量,文件路径写成配置文件的形式,以免重复打包3.输入输出文件夹,可以配置以免重复打包 ...

分析N沟道MOS管和P沟道MOS管在电路中的详细应用-程序员宅基地

文章浏览阅读7.5k次,点赞5次,收藏17次。   MOS管集成电路特点:  制造工艺比较简单、成品率较高、功耗低、组成的逻辑电路比较简单,集成度高、抗干扰能力强,特别适合于大规模集成电路。   MOS管集成电路包括:  NMOS管组成的NMOS管电路、PMOS管组成的PMOS管电路及由NMOS和PMOS两种管子组成的互补MOS电路,即CMOS电路。  PMOS管门电路与NMOS管电路的原理完全相同,只是..._n沟道mos管

低成本小车, esp32, micropython, wifi, 浏览器控制控制(四轮版)_远程控制wifi遥控小车-程序员宅基地

文章浏览阅读2.1k次,点赞5次,收藏29次。底成本小车, esp32, micropython, wifi, 浏览器控制控制(四轮版)_远程控制wifi遥控小车

安装modelsim 运行patch_dll.bat闪退不生成license_patchdll打开闪退-程序员宅基地

文章浏览阅读306次。将网络适配器中只留下一个自己用的或许有帮助。_patchdll打开闪退

MySQL 语法问题:You can‘t specify target table ‘xxx‘ for update in FROM clause. 原因及解决方法_you can't specify target table 't_bill' for update-程序员宅基地

文章浏览阅读429次。报错信息如下:[Code: 1093, SQL State: HY000] You can’t specify target table ‘bd_bankaccbas’ for update in FROM clause译文:不能在FROM子句中指定目标表‘bd_bankaccbas’进行更新。有问题的SQL语句如下,它在oracle数据库的语法是支持的,但是mysql就不支持直接这么写:from和update都是同一张表。<span style="col..._you can't specify target table 't_bill' for update in from clause

Spring Boot与消息(JMS、AMQP、RabbitMQ)-程序员宅基地

文章浏览阅读421次。为什么80%的码农都做不了架构师?>>> ..._@jmslistener rabitmq

随便推点

推荐一个神器:wxapp.vim —— Vim中的微信小程序开发利器-程序员宅基地

文章浏览阅读317次,点赞3次,收藏8次。推荐一个神器:wxapp.vim —— Vim中的微信小程序开发利器项目地址:https://gitcode.com/chemzqm/wxapp.vim在前端开发的世界里,Vim作为一款强大的文本编辑器,一直备受程序员们的喜爱。对于微信小程序开发者而言,有一个好消息:wxapp.vim 是一个专为Vim设计的微信小程序插件,能够大幅提升你的代码编写效率。项目简介wxapp.vim是由Git...

00008第一个java桌面小游戏_高淇小球游戏-程序员宅基地

文章浏览阅读833次。我们秉承“快速入门,快速实战”的理念,开发这套系列教程,就是希望朋友们在学习过程中,尽快进入实战环节,尽快介入项目,让大家更有兴趣,更有成就感,从而带来更大的学习动力。如下的小项目,对于第一次接触编程的朋友从理解上会有难度。但是,我们这个项目不在于让大家理解代码本身,而上让大家重在体验“敲代码的感觉”。【项目】桌球游戏小项目练习目标找到敲代码的感觉收获敲代码的兴趣作出效果,找到自信..._高淇小球游戏

大数据(9h)FlinkSQL之Lookup Join_flink lookup join-程序员宅基地

文章浏览阅读6.8k次,点赞6次,收藏15次。ttlFOR SYSTEM_TIME AS OFProcessing Time Temporal Joinlookup joinlookup cacheFlink查询缓存lookup.cache.max-rowslookup.cache.ttl_flink lookup join

路由基础知识-程序员宅基地

文章浏览阅读1.1k次。路由是数据通信网络中最基本的要素。路由信息是指导报文转发的路径信息,路由过程就是报文转发的过程。本文将会介绍路由的基本概念及相关的基本知识。_路由基础知识

LAMP 架构深度优化-程序员宅基地

文章浏览阅读223次。转载地址:https://blog.51cto.com/ucode/1750564著作权归作者所有:来自51CTO博客作者027ryan的原创作品,如需转载,请注明出处,否则将追究法律责任1、Apache worker/prefwork模式说明在linux中,我们可以用httpd-l 查看安装的模块是prefork模式还是worker模式[root@LAMP ~]# /applic..._lamp优化的提示在哪里

python3.7.3+cuda9.2安装pytorch_python官网cuda9.2-程序员宅基地

文章浏览阅读496次。不靠谱的博客太多了。。。网上各种方法搞得人头大,明明超级简单,但信息接收太多反而对心理造成极大负担我试了很多方法,包括各博客用清华源等等下载的、怎么离线安装、还有下载cudann啥的,其实重点很明确,就是确定自己的cuda版本和python版本,然后去官网复制命令安装。不知道折腾了这么久 我的电脑会不会有啥影响,众多没装成功pytorch会崩掉我的电脑吗。。下面是我的安装过程:先确定python版本win+R,输入cmd,打开命令窗口,然后输入python即可看到自己的版本确定是否有_python官网cuda9.2

推荐文章

热门文章

相关标签