Print.js--网页文件打印

Print.js
有四种打印文档类型可用:’ pdf ‘,’ html ','图像’和json。

默认类型是’ pdf '。
它的基本用法是呼叫printJS()只需输入一个PDF文档网址:printJS('docs/PrintJS.pdf ')。
对于图像文件，想法是一样的，但是您需要传递第二个参数:printJS('images/PrintJS.jpg ‘，’ image ‘)。
要打印HTML元素，以类似的方式，传入元素id并键入:printJS(’ myelementtid ‘，’ html ‘)。
打印JSON数据时，传入要打印的数据、类型和数据属性: printJS({可打印:myData，类型:’ json '，属性:[‘prop1
‘，’ prop2 ‘，’ prop3’]})；

下载并安装

npm/yarn安装

npm install print-js --save
yarn add print-js

在项目中引入

import print from ‘print-js’

用cdn也可以直接引入

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

入门指南

在需要的文件内引入 <script src="print.js"></script>
如果你使用了modal 需要引入css文件<link rel="stylesheet" type="text/css" href="print.css">

文件打印

添加一个按钮来打印位于您的托管服务器上的PDF文件:

<button type="button" onclick="printJS('docs/printjs.pdf')">Print PDF</button>

对于大文件，您可以在加载文件时向用户显示消息

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">Print PDF with Message</button>

支持base64 PDF打印:

<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">Print PDF with Message</button>

HTML打印

有时我们只想打印HTML页面的选定部分，这可能很棘手。使用Print.js，我们可以轻松地传递想要打印的元素的id。元素可以是任何标签，只要它有唯一的id。该库将尝试打印它非常接近它在屏幕上的样子，同时，它将为它创建一个打印机友好的格式。

表单打印

带有参数的打印，比如标题

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">Print Form with Header</button>

图像打印

图片打印

 printJS('images/print-01-highres.jpg', 'image')

添加页眉

 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

打印多个图片

 printJS({printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],type: 'image',header: 'Multiple Images',imageStyle: 'width:50%;margin-bottom:20px;'})

JSON打印

 someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]

基本

 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">Print JSON Data</button>

自定义样式

 <button type="button" onclick="printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json',gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',gridStyle: 'border: 2px solid #3971A5;'})">Print JSON Data</button>

自定义表格标题名称

 <button type="button" onclick="printJS({printable: someJSONdata,properties: [{ field: 'name', displayName: 'Full Name'},{ field: 'email', displayName: 'E-mail'},{ field: 'phone', displayName: 'Phone'}],type: 'json'})">Print with custom table header text</button>

添加表格标题文本

<button type="button" onclick="printJS({printable: someJSONdata,type: 'json',properties: ['name', 'email', 'phone'],header: '<h3 class="custom-h3">My custom header</h3>',style: '.custom-h3 { color: red; }'})">Print header raw html
</button>

Print.js--网页文件打印相关推荐

jquery.print.js 网页局部打印横向打印去掉页眉页脚
ie-设置(右上角齿轮)-打印-页面设置引入print.css,这个css里存的是自己要打印的区域的样式,比如table,tr,td,边框边距等的样式引入jquery.js和jquery.prin ...
前端网页打印插件print.js
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
网页打印非常优秀的插件 Print.js
前言:最近需要在网页上打印,网上找了很多,刚开始使用的 lodop打印插件来打印,没有达到理想的要求,它需要下载.区分浏览器的位数来安装.在vue使用时候必须写成内部样式,在笔记本样式失效等问题,使我 ...
vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
原生js打印插件Print.js
网页打印功能在很多的网站系统中都会使用到.比如说报表打印功能等. 以下是在Jquery插件库中找到的一款原生js打印插件,代码清洁简单,封装的代码也很好理解. index.html页面代码 <! ...
简单易用的JQuery网页内容打印插件——jQuery.print.js
1. 官方网址下载jQuery.print.js.配置参数介绍.官方Demo 2. 简介: jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定 ...
使用jQuery.print.js打印
在网页开发的过程中不可避免会使用到浏览器的打印功能,通常情况下开发者需要在打印完成后提示用户进行确认,然后发送更新请求.作者在写这篇博文之前遇到过类似的应用场景:在开发某景区的兑票系统的时候,项目方要 ...
解决windown.print()打印网页后，事件失效问题
使用windown.print()封装一个打印的工具函数原本封装的print.js export default function print() {// 打印功能const printDom = ...
js网页文件资源加载器
功能:依次加载资源文件范围:适用于所有js网页 //资源加载var arr = ['img/pic_1.png', 'img/pic_2.png', 'img/pic_3.png'];functio ...