【Vue】如何实现打印功能:Printjs插件
前言
客户需求: 表单支持在线打印
实现思路: 百度…百度…百度之后,printjs
这款插件比较满足需求,无需下载,无需写打印模板,并且兼容Element-ui中el-form表单的打印。
一、Print.js介绍
Print.js官网
Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离开界面,也无需使用嵌入。 对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
支持“pdf”、“html”、“image”和“json”四种打印文档类型。默认为“pdf”。
PrintJS参数配置表
参数 | 默认值 | 描述 |
---|---|---|
printable | null | 文档来源:pdf 或图片 url、html 元素 id 或 json 数据对象。 |
type | ‘pdf’ | 可打印类型。可用的打印选项有:pdf、html、image、json 和 raw-html。 |
header | null | 用于与 HTML、图像或 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、图像或 json 时,这将显示为文档标题。 |
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%;’ | 打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。 |
二、安装/引入
方法1.下载print.js
- 从官网下载print.js,将下载的 print.js 放入项目utils文件夹
- 可以全局引入即(在main.js中引入),也可以在需要的文件里面引入
import Print from './utils/print'
方法2.使用npm安装print插件
- 安装print-js
npm install print-js --save
- 可以全局引入即(在main.js中引入),也可以在需要的文件里面引入
import Print from 'print-js'
三、使用-“html”类型
在表单页面中调用打印方法
<template><div class="app-container"><div id="printFrom"><el-form :ref="formRef" :model="form" :rules="validateRules">...</el-form><el-button type="info" @click="handlePrint(printData)">打印</el-button></div></div>
</template><script>export default {data() {return {formRef: 'form',validateRules: [],printData: {printable: 'printFrom',header: '申请表',ignore: ['no-print']}}},handlePrint(params) {printJS({printable: params.printable, // 'printFrom', // 标签元素idtype: params.type || 'html',header: params.header, // '表单',targetStyles: ['*'],style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾ignoreElements: params.ignore || [], // ['no-print']properties: params.properties || null})}}
}
</script>
点击打印按钮,弹出打印预览界面,右边栏调整打印界面。
假设出现打印不全的问题,可以通过缩放来进行设置,数值越小,缩放的越小。
四、其他Type示例
1.pdf
printJS('docs/printjs.pdf')
// 或
printJS({printable:'docs/printjs.pdf', type:'pdf', showModal:true})
2.image单个图像
printJS('images/print-01-highres.jpg', 'image')
// 或
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})
3.image多个图像
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;'
})
4.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'}]printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json',gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',gridStyle: 'border: 2px solid #3971A5;'
})
更多示例请参考Print.js官网。
总结
以上便是printjs插件的使用场景,希望对大家有所帮助。
【Vue】如何实现打印功能:Printjs插件相关推荐
- vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
- vue 实现 发票打印功能
参考资料 JS实现快递单打印功能[推荐] 原生,不用 vue实现打印功能的两种方法 推荐 js 实现打印功能 jq插件 原生js打印插件Print.js print插件 vue原生js打印插件 js解 ...
- VUE中实现打印功能插件—vue-easy-print
话不多说直接上代码 1.安装插件:注意版本号 npm install vue-easy-print --save 我用的是0.0.8版本 npm install vue-easy-print@0.0. ...
- vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能 组件vue-print-nb 源码: https://github.com/shengbid/vue-print, https://github.com/sheng ...
- 【vue】实现打印功能
文章目录 一.vue-print-nb [1]安装 [2]引用 [3]API [4]示例代码 [5]vue-print-nb插件的一些优化 [6]注意事项: 二.print.js :解决了无法打印本地 ...
- Vue页面实现打印功能
实现打印功能,需要安装一个插件vue-print-nb,使用方法如下 1)安装全局的插件 npm install vue-print-nb -S 2)在main.js中注册 import Print ...
- vue如何实现打印功能
这里用的是 vuePlugs_printjs 首先打开 git项目地址 然后将 print.js 下载到本地放入项目文件夹,使用方法如下: //1.首先在main.js引入 import Print ...
- vue项目实现打印功能
使用的一个叫做"vue-print-nb"的插件,具体步骤: 1.下载插件:npm install vue-print-nb --save 2.在main导入并注册: // 打印 ...
- 打印机支持打印html页面吗,vue下调用打印功能,打印html页面
wo我今天翻博客,csdn上面有一篇关于我之前记录的工具函数打印html元素的js工具函数没了.我纳闷了,csdn就不重新补了,换掘金来记录. 主要解决: 会有项目需求说要求在html页面下调用打印机 ...
- vue表格数据打印功能的实现
1.安装npm install vue-print-nb --save 2.引入// 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.u ...
最新文章
- Python 读取图,旋转,缩放(PIL, matplotlib)
- hyper-V 检查点
- Python3NumPy——数组(2)之数学空间与NumPy空间
- 使用enterTextInWebElement处理qq授权页报“网络异常,请稍后再试”的解决方法
- esjava 同步mysql_Elasticsearch和mysql数据同步(elasticsearch-jdbc)
- window环境下mysql配置参数_Window下mysql环境配置问题整理
- windows和linux双系统引导问题
- go语言查询某个值是否在数组中_go语言中的数组
- Oracle数据块损坏的恢复实例
- 计算机网络学习笔记(24. HTTP消息格式)
- windows使用detours实现进程拦截实操
- c语言注释中文,Comments(注释符)
- android 开发客户端开发,【Android应用】Android网站客户端的开发介绍(1)
- 字节飞书前端三轮技术面+HR面
- 修一座安全的广厦,庇护赛博世界的流浪者
- 2014年中南大学复试-安全路径
- 罗技k380连接双系统(win10和ubuntu18)
- vm虚拟机网络标志_虚拟机安装win7系统后网络图标黄色标志不能上网如何解决
- 3.17√ 识别次读入的一个以@为结束符的字符序列是否为形如”序列1序列2“模式的字符序列 ,序列12均没有,且序列2为序列1的逆序列
- 佛家经典禅语语录句子
热门文章
- java 画正方体直观图_用斜二测画法画水平放置的边长为的正方形的直观图,则所得直观图的面积为...
- MS08067红队攻防第四期 开班啦~
- HDU 2673:shǎ崽 OrOrOrOrz
- 有线无线一体化网络设计原则
- AIGC的未来展望和发展方向
- 电脑误删的文件怎么找回
- Panda白话 - Synchronized底层同步机制
- SpringBoot+MyBatisPlus+Vue增删改查
- 中国式小学生计算题软件规格说明书
- [少女时代][分享]171031 SONE NOTE LIVE vol.12公开 允儿挑战艺术字体书写