Print.js实现打印pdf，HTML，图片(可设置样式可分页)

一.安装及引入Print.js

二.介绍

三.常用配置

四.具体使用

一.安装及引入Print.js

1.安装

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

2.在需要使用的文件引入

import printJS from 'print-js'

二.介绍

Print.js有四种打印类型：'pdf'、'html'、'image'、'json'。

它的基本用法是调用printJS()并传入参数

//pdf打印 传入PDF文档url
printJS('docs/PrintJS.pdf')//图片打印 传入图片url，第二个参数:'image'
printJS('images/PrintJS.jpg', 'image')//html打印 第一个参数:元素id，第二个参数:'html'
printJS('myElementId', 'html')//json打印 当打印Json数据时，传入要打印的数据、类型和数据属性
printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']})

三.常用配置

Print.js接受一个对象作为参数，在这里你可以配置一些选项:

字段	默认值	说明
printable	null	数据源:pdf or image的url，html类型则填打印区域元素id，json类型则是数据object。
type	'pdf'	可选类型:pdf, html, image, json。
header	null	应用于页面顶部标题文本。
headerStyle	'font-weight: 300;'	应用于标题文本的可选标题样式。
maxWidth	800	最大文档宽度(像素)。
css	null	这允许我们传递一个或多个css文件的url，应该应用到正在打印的html。Value可以是包含单个URL的字符串，也可以是包含多个URL的数组。
style	null	这允许我们传递一个自定义样式的字符串，该字符串应应用于正在打印的html。

四.具体使用

1.打印Html

<div id="printJS-HTML" style="display:none;"><div v-for="index in 5" :key="index"><table><tr><td>序号</td><td>作者</td></tr><tr><td>1</td><td>Ghmin</td></tr></table><!--  控制打印分页的关键 --><div class="paging"></div></div>
</div>
<button @click="printHtml">打印 HTML</button>

const printHtml=()=>{//在页面显示需打印区域来获取domdocument.querySelector('#printJS-HTML').style.display = 'block'printJS({printable: 'printJS-HTML',//打印区域idtype: 'html',//打印类型style: `@page { size: auto; } .paging{page-break-after: always;}`,})//获取打印内容后隐藏domdocument.querySelector('#printJS-HTML').style.display = 'none'
}

这里 .paging{page-break-after: always;}样式就是控制分页的关键。

2.打印图片

打印图片的话可以使用上面第一种Html的方式，但更推荐使用Print.js提供的"image"打印类型

  printJS({printable: ['第一张图片Url','第二张图片Url','第三张图片Url'],type: 'image',header: null,imageStyle: `display: block;margin: 0 auto;page-break-after: always;max-width:100%`})

相对于Html方式这个更简单，传入需要打印的图片url数组即可。

更多内容可访问 Print.js官网：https://printjs.crabbly.com/

Print.js实现打印pdf，HTML，图片(可设置样式可分页)相关推荐

vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
处理jquery.jqprint.js不能打印input、textarea区以及样式问题
处理jquery.jqprint.js不能打印input.textarea区以及样式问题对于打印区的input和textarea做一下处理: 处理打印样式问题(打印样式与显示样式不一样) 对于打印区 ...
使用js在线将pdf转为图片
纯前端js,不用后端代码,即可将pdf转为图片. 在线demo地址 index.html <!DOCTYPE html> <html><head><meta ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
html导出带页码的word,使用js把html导出word，并配置样式和分页功能
js导出html为word的方法 getquestion:function(){ require(['backend/FileSaver'], function(){ require(['backen ...
js打印pdf 使用Adobe reader 打印pdf
最近工作上有需要在js中打印pdf文件,从中遇到了一些问题,到现在已经解决了,做个记录.希望能帮到有需要的人. 我这边主要采用Adobe reader进行加载打印. ...
C# 六种方案打印PDF文档
打印PDF文档是开发人员经久不变的话题,常见的打印需求大致有以下六种: 用默认打印机打印PDF文档用虚拟打印机打印PDF文档指定打印机及PDF文档的打印页码范围静默打印PDF文档双面打印PDF ...

Print.js实现打印pdf，HTML，图片(可设置样式可分页)

一.安装及引入Print.js

二.介绍

三.常用配置

四.具体使用

Print.js实现打印pdf，HTML，图片(可设置样式可分页)相关推荐

最新文章

热门文章