前端网页打印插件print.js(可导出pdf)
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量、简单、手动引入、不依赖其他库。示范项目github:https://github.com/lemoncool/print-demo。效果如图:
关于print.js
功能:网页打印插件,支持打印或不打印指定区域,并且它还支持将网页导出为pdf。前提是可以接受该交互效果。
- 已实现:
原生js书写
不依赖其他库可指定打印(或不打印)的区域
支持定制css,内联、外联均可
支持select、input(text、redio、checkbox)、textarea获取参数
- 待验证:
目前测试谷歌浏览器运行正常,其他低版本浏览器兼容性待验证
如何使用
本插件可在 js 或 vue 项目中使用,其他框架未验证。两种使用场景引入的 js 大同小异。
1、声明打印区域:
可通过设置 class 类名或 id 指定打印区域,但vue项目涉及到打包部署,推荐使用 ref 获取DOM节点,如果使用 id 或 class 获取,打包部署后打印内容可能显示空白。
<div class="printDom">指定打印区域</div> <div id="printDom">指定打印区域</div> <div ref="printDom">指定打印区域</div>
2、调用打印方法:
2.1 js 项目
// 引入
<script src="print.js"></script> // 调用
Print('#printDom',{});
2.2 vue 项目
main.js引入,xx.vue页面引用
//main.js
import Print from './print';
Vue.use(Print); // xx.vue
this.$print(this.$refs.printDom, {});
3、声明不打印区域:
js 和 vue 项目通用
3.1 声明"no-print"类名
print方法中,不需要特意声明,在打印时默认会剔除.no-print区域。
<div class="no-print">不打印区域</div> Print('#printDom');
3.2 自定义类名
此时需要在print方法中通过"noPrint"属性指定不打印区域。
<div class="no-print-box">自定义不打印区域类名</div> Print('#printDom',{noPrint:'.no-print-box'});
4、参数说明:
js 和 vue 项目通用,以 vue 项目为例。
this.$print(this.$refs.printDom, {
noPrint: '.noPrint',
onStart: () => {
console.log('打印开始');
},
onEnd: () => {
onsole.log('打印完成');
}
});
参数位置
|
属性
|
说明
|
参数1
|
类名、id、ref声明dom
|
打印区域
|
|
noPrint
|
不打印区域,默认'.no-print'
|
参数2
|
onStart
|
打印前回调函数
|
|
onEnd
|
打印后回调函数,确定和取消都会触发
|
5、vue项目可能遇到的问题,见下图:
1、el-select中,文本过长,超出了显示宽度。这种情况在网页上,可以通过下拉框选项看完整文本。但是此时导出页面是没有交互的。
解决办法:尽可能把下拉框宽度调宽,如果效果仍然不好,可以考虑在下拉框同级写个textarea,在打印时,控制下拉框和文本域的显示隐藏。
2、选项的背景色没有正常显示。 解决办法:为打印区域的最外层容器设置样式,如果项目中安装了node-sass,也可直接为body加样式。两种方式任选其一。
<style>
.printContainer {
-webkit-print-color-adjust: exact;
}
</style> <!--以下方式需要项目引入node-sass-->
<style lang="scss">
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
</style>
3、<el-input type="textarea" autosize></el-input>在打印预览时,显示高度错误。
原因:vue页面中,打印区域的宽度大于打印预览时页面宽度。在生成打印预览文件时,textarea没有重新计算,直接将vue页面下的height搬了过来,从而引发了打印时textarea文本展示高度不够的问题。
解决办法:可以的话,为打印区域的最外层容器设置宽度。值接近打印预览时宽度,700px左右即可。或者想办法在打印的一瞬间,让该文本域先隐藏,再展示,也可以触发重新计算,也可规避此问题。
4、vue页面中,显示"打印"按钮,在打印时不想打印该按钮。
解决办法:见本文上述第三节提到的指定不打印指定区域。
5、打印预览时,显示空白。
检查一下print.js文件,toPrint 方法中, 是否有load方法。因为我在其他网页链接中看到过不同版本的print.js。
6、打印预览时显示undefined。
6、实例项目介绍:
看到这里,如果清楚了该插件如何使用,可以直接引用 print.js 文件到你的项目
同时,也有一份示例项目,可点击此处获取源码(如果有用,还请点击一下 Star)。项目详细介绍见 README。
前端网页打印插件print.js(可导出pdf)的更多相关文章
- Blender 3D 打印插件Print Toolbox
Blender 3D Print Toolbox Statistics 统计,可以提算出模型的体积,可供打印备料参考. Error Checking 错误检查 Solid 检查模型是否完整正确,是否有 ...
- PHP jquer网页打印插件 PrintArea
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...
- WPF打印、预览、导出PDF
本人很懒,已找到可使用样例 例: http://www.cnblogs.com/guogangj/archive/2013/02/27/2934733.html
- jQuery简单易用的网页内容打印插件
简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定区域的网页元素,可以指定跳过不打印某些元素,还可以打印整个页面内容.并且提供了丰富的 ...
- js插件---bootstrap-datepicker.js是什么
js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...
- [js]EasyUI导出数据表格(Export DataGrid)
包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...
- 在 chrome 上导出 pdf
用html+css写出网页,然后在chrome上导出pdf 1. command + p:快捷呼出打印: 2. “目标打印机”:选择“更改”,之后选择“另存为PDF”: 3. 点“更多设置”,可以勾选 ...
- JS 网页打印解决方案
这些日子真是太忙了,项目太多了公司总是加班,而且这些项目中好多都用到的打印,所以学习了一段时间js的打印. 其实原来只是用到了简单的功能,现在要深入的了解才发现原来ie的网页打印也是如此的强大. 以下 ...
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
随机推荐
- Spring源码解析之BeanFactoryPostProcessor(二)
上一章,我们介绍了在AnnotationConfigApplicationContext初始化的时候,会创建AnnotatedBeanDefinitionReader和ClassPathBeanDef ...
- CentOS创建管理LVM分区(挂载新分区)
来源: CentOS 8.0 创建管理LVM分区(挂载新分区) https://www.iwmyx.cn/centos80cjgllvmfa.html 1.查看可用磁盘 fdisk -l 2.新盘(/ ...
- mysql游标cursor与for循环
delimiter // create procedure p2() begin declare row_id int DEFAULT 0; declare row_num int DEFAULT 0 ...
- 冲刺Day4
每天举行站立式会议照片: 昨天已完成的工作: 1.登录注册前端与后端的交互 2.订单模块的部分代码 3.用户模块的部分代码 今天计划完成的工作: 成员 任务 高嘉淳 继续完善用户模块的功能 覃泽泰 继 ...
- C# 继承类的值赋
C# 继承类的值赋 /// <summary> /// 将父类的值赋值到子类中 /// </summary> /// <typeparam name="TPar ...
- BJOI2017 机动训练
落谷.Loj. Description 定义机动路径为: 没有自环 路径至少包含两个格子 从起点开始每一步都向不远离终点的方向移动 相同地形序列指路径上顺序经过的地形序列. 定义机动路径的权值为相同地 ...
- 题解-CF101D Castle
题面 CF101D Castle 给一棵 \(n\) 个节点的带权树,求一种遍历方案,从 \(1\) 出发,每条边走两次,走过所有点,第一次经过每个节点的平均时间最小.输出这个平均时间. 数据范围:\ ...
- 题解 CF1426E - Rock, Paper, Scissors
一眼题. 第一问很简单吧,就是每个 \(\tt Alice\) 能赢的都尽量让他赢. 第二问很简单吧,就是让 \(\tt Alice\) 输的或平局的尽量多,于是跑个网络最大流.\(1 - 3\) 的 ...
- logstash导入DNS解析数据到es中,中间有filebeat
这个过程中,主要用logstash处理数据的时候不好处理. 在logstash-sample.conf这个配置文件中的配置,我用这个监控filebeat的5044端口 # Sample Logstas ...
- STL——容器(List)list 数据的存取
list.front(); //返回第一个元素 list.back(); //返回最后一个元素 1 #include <iostream> 2 #include <list> ...