Print.js javascript库 实现页面打印

Print.js javascript库 实现页面打印

官网地址

您可以从GitHub版本下载最新版本的Print.js

下载v1.0.61

npm 安装

  npm install print-js --save

npm安装时将库导入项目

 import print from 'print-js'

首先,我们需要在页面上包含Print.js库和样式

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

下面主要介绍一下我们要用的打印方法printJS();

printJS()将接受一个对象作为参数,下面表格的参数则为该对象的属性,通过控制属性值来控制打印;

参数 默认值 说明
printable: null 文档来源:pdf或图像的url,html元素的id或json数据的对象
type: PDF 可打印类型。可用的打印选项包括:pdf,html,image,json和raw-html。
header: null 用于HTML,Image或JSON打印的可选标头。它将放在页面顶部。此属性将接受文本或原始HTML
headerStyle: 'font-weight:300;' 要应用于标题文本的可选标题样式
maxWidth: 800 最大文档宽度(像素)。根据需要更改此项。在打印HTML,图像或JSON时使用。
css: null 这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串,也可以是包含多个URL的数组。
style: null 这允许我们传递一个字符串,该字符串应该应用于正在打印的html。
scanStyles: true 设置为false时,库不会处理应用于正在打印的html的样式。使用css参数时很有用。
targetStyle: null 默认情况下,在打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。例如:['padding-top','border-bottom']
targetStyles: null targetStyle相同,这将处理任何一系列样式。例如:['border','padding'],将包括'border-bottom','border-top','border-left','border-right','padding-top'等。你也可以传递['*']来处理所有样式
ignoreElements: [] 接受打印父html元素时应忽略的html的id数组。
properties: null 在打印JSON时使用。这些是对象属性名称。
gridHeaderStyle: 'font-weight:bold;' 打印JSON数据时网格标题的可选样式。
gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;' 打印JSON数据时网格行的可选样式
repeatTableHeader: true 在打印JSON数据时使用。设置为时false,数据表标题仅显示在第一页中。
showModal: null 启用此选项可在检索或处理大型PDF文件时显示用户反馈
modalMessage: 'Retrieving Document...' 当向用户显示的消息showModal被设定为true。
onLoadingStart: null 加载PDF时要执行的功能
onLoadingEnd: null 加载PDF后要执行的功能
documentTitle: 'Document' 打印html,image或json时,它将显示为文档标题。如果用户尝试将打印作业保存为pdf文件,它也将是文档的名称。
fallbackPrintable: null 打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递给printable的原始文档。如果您在备用pdf文件中注入javascript,这可能很有用。
onPdfOpen : null 打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,这将在发生这种情况时执行。在您想要处理打印流程,更新用户界面等的某些情况下,它可能很有用。
onPrintDialogClose: null 关闭浏览器打印对话框后执行回调功能
onError: error => throw error 发生错误时要执行的回调函数。
base64: false 在打印作为base64数据传递的PDF文档时使用
honorMarginPadding(不建议使用): true 这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很棒,但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。
honorColor(不建议使用) : false 要以彩色打印文本,请将此属性设置为true。默认情况下,所有文本都将以黑色打印。
font(不建议使用): 'TimesNewRoman' 打印HTML或JSON时使用的字体
font_size(不建议使用): '12pt' 打印HTML或JSON时使用的字体大小
imageStyle (不建议使用): 'width:100%;' 打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。
frameId: null print.js会将要打印的内容复制到一个新的Frame中,此参数是frame的id值

示例

HTML打印

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

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

向表单添加标题

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: '这是标题内容' })">
    打印
 </button>

html时候需要注意的事项:

直接采用默认的参数打印html的时候如果打印内容过多时候可能会非常慢,这时候需要设置scanStyles:false,然后把css抽取出来,这样速度就会非常的快!

printJS({ printable: 'myHtmlElement', type: 'html', scanStyles: false, css: '/my_stylesheet.css' })

图片的打印

通过传递图像网址,Print.js可用于快速打印页面上的任何图像。当您使用低分辨率版本的图像在屏幕上显示多个图像时,此功能非常有用。当用户尝试打印所选图像时,您可以将高分辨率URL传递给Print.js。

<img src="images/print-01.jpg" />
 printJS('图片的url', 'image')

添加标题

printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: '这是标题'})

打印多张图片

 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: '标题仅显示在第一张图片',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

JSON的打印

一种简单快捷的方法来打印动态数据或javascript对象数组。

var  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'})">
    打印
 </button>

自定义css来设置数据网格的样式:

 <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;'
    })">
    打印
 </button>

自定义发送对象数组的表头文本

 <button type="button" onclick="printJS({
        printable: someJSONdata,
        properties: [
        { field: 'name', displayName: '自定义表头'},
        { field: 'email', displayName: '自定义表头'},
        { field: 'phone', displayName: '自定义表头'}
        ],
        type: 'json'
        })">
   打印
 </button>

JSON,HTML和图像打印可以接收原始HTML标头

<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>

感谢WwJoyous的分享

浪客行1213的简书


xhh
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,582评论 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,068评论 1 45
  • 在iOS 4.2和以后,应用程序可以添加对本地打印机的打印内容的支持。尽管并非所有应用程序都需要打印支持,但是如果...
    陵无山阅读 3,360评论 0 4
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,007评论 0 2
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,028评论 1 32