前端使用print.js实现打印
前言
项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。
如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用qrcodesjs2生成二维码
注:以下都是基于edge浏览器进行的,另外身边没有打印机,实际打印效果如何不清楚
print.js
这里用一下别人写好的库,print-demo
项目下载下来后,找到print.js
,我们只需要这个。如果是vue2的项目直接用就好了,vue3的项目就简单改一下就可以
// const MyPlugin = {};
// MyPlugin.install = function (Vue, options) {// // 4. 添加实例方法
// Vue.prototype.$print = Print;
// };
// export default MyPlugin;export default Print;
如何使用
声明打印区域
可通过设置class 类名或 id 指定打印区域,但由于vue项目涉及到打包部署,推荐使用ref获取DOM节点,如果使用id或class获取,打包部署后打印内容可能显示空白。
<div class="printDom">指定打印区域</div><div id="printDom">指定打印区域</div><div ref="printDom">指定打印区域</div>
调用打印方法
- vue2 项目
//main.js
import Print from './print';
Vue.use(Print);// xx.vuethis.$print(this.$refs.printDom, {});
- vue3项目,在需要使用的页面,引入方法,然后方法调用。
声明不打印区域
- 声明"no-print"类名 ,此时print方法中,不需要特意声明,默认会剔除
.no-print
区域
<div class="no-print">不打印区域</div>
Print('#printDom');
- 自定义类名,此时需要在print方法中通过"noPrint"属性指定不打印区域
<div class="no-print-box">自定义不打印区域类名</div>Print('#printDom',{noPrint:'.no-print-box'});
参数说明
this.$print(this.$refs.printDom, {noPrint: '.noPrint',onStart: () => {console.log('打印开始');},onEnd: () => {onsole.log('打印完成');}
});
样式
table样式
打印中表格是不可或缺的,从网上找了份样式简单修改了一下。如果觉得不好看,可以自己改一下
table {border-collapse: collapse;margin: 0 auto;width: 100%;
}table tr {background: #EFF3F5;
}table td,
table th {/**文字垂直、水平居中 */vertical-align: middle;text-align: center;/** 基础样式 */border: 2px solid black;border-left: 0px;color: #666;height: 40px;font-size: 18px;min-width: 150px;line-height: 30px;
}table td:last-child,
table th:last-child {border-right: 0px;
}table thead th {background-color: #CCE8EB;width: 100px;
}
但是实际在浏览器里的显示还是有些差距的,原因暂时不清楚,有指定的大佬欢迎留言
与打印有关的样式
参考文章:打印样式设计
分页符
如果一次只打印一条数据还是可以的,但是如果打印多条数据,就会存在数据被切割的问题,如下图:
为了解决这个问题,css提供了page-break-after
、page-break-before
、page-break-inside
这三个属性,一般只需要用到第一个即可,其他可自行百度。
page-break-after
page-break-after 属性用于设置在指定元素后面插入分页符。
值 | 描述 |
---|---|
auto | 默认。如果必要则在元素后插入分页符。 |
always | 在元素后插入分页符。 |
avoid | 避免在元素后插入分页符。 |
left | 在元素之后足够的分页符,一直到一张空白的左页为止。 |
right | 在元素之后足够的分页符,一直到一张空白的右页为止。 |
注:
- Firefox,Chrome 和 Safari 不支持属性值"avoid",“left"和"right”。
- 不能对绝对定位的元素使用此属性。
通常我们可以设置:page-break-after: always;
在每一条数据后面都添加一个分页符,这样打印时会保证每条数据相互独立
@page
@page规则允许你指定页面盒子的许多方面。例如,你想要指定页面尺寸。下面这条规则指定默认页面尺寸是5.5*8.5英尺。如果你想打印一本书,也许通过按需打印,找到可用尺寸很重要。
@page { size: 5.5in 8.5in; }
除了可以用长度值声明尺寸,你还可以使用纸质尺寸关键字,例如"A4"或““legal”。
@page {size: A4;
}
你也可以使用关键字来指定页面方向 portrait(竖向的)
或landscape(横向的)
。
@page { size: A4 landscape; }
使用注意: @page 不要嵌套在容器里,与其他dom无关系
默认:
修改后
@page {size: A3 landscape;
}
页面左边距和右边距
我们可以用这些选择器给页面定义不同的边距尺寸。
@page :left { margin-left: 1cm; }
@page :right { margin-left: 8cm; }
注: 测试了一下,left
好像没生效,另外还与布局是横向还是纵向有关
规则还定义了两个伪类选择器。:first选择器选中是文档的第一页。
@page :first {}
:blank伪类选择器选中任何“故意左侧留白”的页面。要添加这样的文字,我们可以使用目标是边距盒顶部中心的生成内容。
@page :blank { @top-center { content: "This page is intentionally left blank." } }
注:并没有在浏览器中看到任何文字,当然也有可能是我理解的有问题
除了@top-center
外,还有以下位置:
其他内容略,自行查看参考的文章,没有相应的效果,不想继续看了
前端使用print.js实现打印相关推荐
- vue封装打印插件print.js实现打印组件功能
代码 插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法 定义-print.js // 打印类属性.方法定义 /* eslint-di ...
- Print.js实现打印pdf,HTML,图片(可设置样式可分页)
目录 一.安装及引入Print.js 二.介绍 三.常用配置 四.具体使用 一.安装及引入Print.js 1.安装 npm install print-js --save //or yarn add ...
- vue使用print.js实现打印功能,以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
- vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
- 前端网页打印插件print.js
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
- jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能(jquery.print.js)...
1. 分类 原生打印,window.print() 实现 插件实现,很多种,我这里选择的是 jquery.print.js 优缺点 原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么 ...
- 前端JS 云打印 LODOP实践
文章目录 前言 一.Lodop是什么? 二.如何使用Lodop 1.下载打印插件 2.配置打印机 3.html中植入打印控件 4.调用Lodop对应的JS相关方法接口实现打印功能 三.Lodop主要方 ...
- 使用print.js进行分页打印
如何进行表格大量数据的分页打印 print.js官网 目的:实现大量数据的分页打印 探究过程:几种流行的打印插件, vue-print-nb vue-easy-print 都没有实现自动分页打印功能( ...
- 原生js打印插件Print.js
网页打印功能在很多的网站系统中都会使用到.比如说报表打印功能等. 以下是在Jquery插件库中找到的一款原生js打印插件,代码清洁简单,封装的代码也很好理解. index.html页面代码 <! ...
最新文章
- 怎么实现Web系统URL传输(表单提交)参数加密-zhuan
- ZeroMQ接口函数之 :zmq_pgm – ØMQ 使用PGM 进行可靠的多路传输
- java中无符号右移怎么移_Java | java中>>(右移)和>>>(无符号右移)的区别...
- 欢迎使用CSDN-markdown编辑器1212131
- 备战双 11!蚂蚁金服万级规模 K8s 集群管理系统如何设计?
- Asp.Net前台调用后台变量
- pcb板可挖孔吗_PCB板微孔加工方法之机械钻孔
- 【Kafka】Kafka如何通过源码实现监控
- virtualbox安装增强功能时【未能加载虚拟光盘】
- html表格行数代码,HTML表格可选行Javascript包
- 撰写SCI论文的选题思路与技巧 - 易智编译EaseEditing
- 通过IMAP方式迁移U-Mail邮件到Exchange 2013之2008R2 AD搭建!
- 第164篇,陌生人和贵人(扶摇生财思维)
- 谈谈如何通过需求文档产生工作排期
- Linux系统中errno对应的中文意思 errno.h
- vivado编译出错 [Synth 8-729] [Synth 8-787]解决方法
- 机器学习中ground truth的解释
- 谷歌收购摩托罗拉,这消息太重磅了
- chrome frame节点 取_爬虫3-下(利用Selenium + Chrome Driver模拟用户操作浏览器)
- python 正则表达式 re 爬取网页及分析总结