1、在根目录下面新建一个plugins文件夹,下面新建一个print.js文件(print.js代码会放到文章最后)
(也可以直接npm安装插件npm install print-js --save,但直接安装的插件配置会有问题,不建议)
2、 在main.js引入插件
二、基本使用
可以通过对div绑定ref属性,通过this.$print(this.$refs['xxxx'])直接打印这块内容
注意:这里打印区域的样式需要写成行内样式,不然打印预览不生效
另外一种办法就是通过@media print{}在这里面写样式
三、如何根据功能区、动态调整打印样式
思路
给打印区域,绑定动态style,里面的宽、高、内边距、外边距啥的可以绑定动态表单值
最近做了个运用浏览器打印合同的功能,之前没做过,记录一下其中遇到的问题,打印页面建议使用新开窗口 原型图如下: 页面内容不多说,表格直接用table绘制,在页面顶部加一个悬浮的打印按钮。点击打印按钮调用打印机(ctrl+p) 实现的打印预览效果如下图: 谷歌浏览器可在打印预览-更多设置-选项中去除页眉和页脚的勾选 打印的页面不可出现横向滚动条,否则会出现打印出来的内容显示不全的问题。最近做一个后台管理系统,其中有个用户需求要求调用 浏览器打印 的功能去打印订单,本来以为需要用户手动( Ctrl+P )、或者打开 右键菜单 ,再选择打印功能。后来经过查询文档,JS提供了调用浏览器打印功能的API。
页面(全屏弹窗)内容设计如上图所示:
其中页面右下方有两个按钮:
这样可以调用浏览器打印功能,但是打印预览页面上会出现右下方的两个按钮,这肯定是用户不想看到的。
因此还需要根据 CSS媒体查询 来区分:
欢迎访问: 个人博客地址