前端网页打印插件print.js

在前端开发中，想打印当前网页的指定区域内容，或将网页导出为多页的PDF，可以借助print.js实现，该插件轻量、简单、手动引入、不依赖其他库。示范项目github：https://github.com/lemoncool/print-demo。打印或导出PDF后效果很好，下图是对比图：

关于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、在打印预览时，显示高度错误。

原因：vue页面中，打印区域的宽度大于打印预览时页面宽度。在生成打印预览文件时，textarea没有重新计算，直接将vue页面下的height搬了过来，从而引发了打印时textarea文本展示高度不够的问题。

解决办法：可以的话，为打印区域的最外层容器设置宽度。值接近打印预览时宽度，700px左右即可。或者想办法在打印的一瞬间，让该文本域先隐藏，再展示，也可以触发重新计算，也可规避此问题。

4、vue页面中，显示"打印"按钮，在打印时不想打印该按钮。

解决办法：见本文上述第三节提到的指定不打印指定区域。

5、打印预览时显示undefined。

检查是否把 ref 绑定在了el-xx 标签上，如果是，试试外层包一个div，ref 绑在div上。

6、打印预览时，显示空白。

检查一下print.js文件，toPrint 方法中，是否有load方法。因为我在其他网页链接中看到过不同版本的print.js。

前端网页打印插件print.js相关推荐

原生js打印插件Print.js
网页打印功能在很多的网站系统中都会使用到.比如说报表打印功能等. 以下是在Jquery插件库中找到的一款原生js打印插件,代码清洁简单,封装的代码也很好理解. index.html页面代码 <! ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
jq jqprint 设置页脚_jquery打印插件jqprint.js使用教程
最近的项目要使用web前端打印,本来在网上搜索了一下采用的js:window.print()局部打印网页的方法,但是经过实际测试发现兼容性不好,无奈只好再找其他方法,终于被我找到了一款基于jquery ...
网页打印非常优秀的插件 Print.js
前言:最近需要在网页上打印,网上找了很多,刚开始使用的 lodop打印插件来打印,没有达到理想的要求,它需要下载.区分浏览器的位数来安装.在vue使用时候必须写成内部样式,在笔记本样式失效等问题,使我 ...
web打印插件 js打印插件网页打印插件
平常浏览网页和文档的时候,随处可见打印两个字,有时候不小心点到,就会弹出一个打印的页面,如果连接了打印机,可以直接调用到打印机进行真实的打印.做为开发人员我们在网页开发过程中经常会有打印页面的需求,目 ...
浏览器打印功能print.js
插件文档:https://printjs.com/ npm文档: https://www.npmjs.com/package/print-js npm install print-js --save ...
window.print()；html 打印之 print.js
插件地址:Print.js - Javascript library for HTML elements, PDF and image files printing. 最近顾客需要把html打印,用w ...
网页分享插件 share.js 国外常用
这两天做推广,要求实现页面分享到国外各大社交媒体的功能.自己去翻各大厂的文档的话,实现起来时间相当长. github 上找了个插件,很6. 地址: https://github.com/ellison ...
Blender 3D 打印插件Print Toolbox
Blender 3D Print Toolbox Statistics 统计,可以提算出模型的体积,可供打印备料参考. Error Checking 错误检查 Solid 检查模型是否完整正确,是否有 ...

前端网页打印插件print.js

前端网页打印插件print.js相关推荐

最新文章

热门文章