vue实现连接打印机功能

1.安装依赖

npm i vue-print-nb

2.挂载依赖

Vue.use(Print)

3.包装元素

<!-- 需要给外层包裹元素ref，在点击打印阶段需要使用ref获取打印元素，需要指定id用于捆绑触发打印的按钮 -->
<div ref="printTest" id="printTest">需要打印的数据
</div>

4.创建打印按钮

<!-- v-print指令可以直接绑定到对应的打印区域-->
<el-button v-print="'#printTest'" type="primary" size="mini">打印</el-button>

//v-print除了绑定对应打印区域的id外，还可以绑定一个配置对象。
printObj: {id: "printTest", //绑定打印区域的idpopTitle: "抄单打印", //内容标签，可以设计页眉//调用打印工具前的回调函数beforeOpenCallback(vue) {vue.printLoading = true;console.log("打开之前");},//调用打印工具成功回调函数openCallback(vue) {vue.printLoading = false;console.log("执行了打印");},//关闭打印机的回调closeCallback(vue) {console.log("关闭了打印工具");},
},

官网参考

5.批量打印分页

在我们需要进行选中多条数据进行打印时，肯定需要将每条数据进行分页处理，一条数据可以打印出多页，但是第二天数据应该在新的一页进行打印而不是紧挨着上一条在同一页进行打印。使用<p style="page-break-after:always;"></p>置于打印数据底部就行！

vue实现连接打印机功能相关推荐

vue打印功能手持终端打印小票，电脑连接打印机打印预览
最近的项目有手持终端打印小票和电脑连接诶打印机打印信息方法有很多种的: 一. vue-print-nb 安装插件 1.安装插件 npm install vue-print-nb --save 2. ...
android 蓝牙打印机（ESC/POS 热敏打印机），打印菜单小票和图片，对蓝牙配对和连接打印功能进行了封装，让你超快实现蓝牙打印功能
BluetoothPrint 项目地址:liuGuiRong18/BluetoothPrint 简介:android 蓝牙打印机(ESC/POS 热敏打印机),打印菜单小票和图片,对蓝牙配对和连接打 ...
vue热敏打印机_vue.js实现连接打印机
本文主要给大家介绍了vue.js如何实现连接打印机,文中通过示例代码介绍的非常详细,具有一定的参考学习价值,希望能帮助到大家. hello word! //要打印的内容打印 printBtn(){ ...
java 连接打印机实现打印PDF文件的功能
java 连接打印机打印PDF文件需求背景是导出excel并且打印,excel导出设置和转PDF网上有很多资料,本文只记录连接打印机打印PDF的部分. 1: 需要引入maven配置 <depe ...
python调用打印机打印pdf_python连接打印机实现打印文档、图片、pdf文件等功能
# 打印二维码 def print_barcode(request): import pyqrcode import random,string from PIL import Image,Image ...
python打印机打印图片_python连接打印机实现打印文档、图片、pdf文件等功能
引言 python连接打印机进行打印,可能根据需求的不同,使用不同的函数模块. 如果你只是简单的想打印文档,比如office文档,你可以使用ShellExecute方法,对于微软office的文档.p ...
笔记本电脑怎样连接打印机_“小小”打印机 | 惠普M17w迷你激打
体积小巧对于家庭用户选购打印机是,具有非常重要的实际意义. 今天介绍的惠普M17w就是这样一台体积小巧的打印机,大小跟化妆盒差不多,占用的地方比一副普通键盘还更小一些,长条状可以放在家里的写字桌.书架 ...
iOS如何完成蓝牙打印机功能
写在前面:因为哥们 @骑驴追蝴蝶遇到了打印图片的功能,这个demo 是支持打印图片的,打印图片代码我单独放在文章最后,有需要的哥们可以去试试之前公司项目里面需要使用到蓝牙打印机这个功能,搞定后特来 ...
台式计算机无线网络连接打印机,台式机怎么样连接无线打印机
新买了一台无线打印机,用台式机怎么样连接呢?下面由学习啦小编给你做出详细的台式机连接无线打印机解决方法介绍!希望对你有帮助! 台式机连接无线打印机解决方法一: 只需做到以下3点,就可以连接成功. 1. ...
同一局域网、不同局域网共享和连接打印机设置
Windows同一局域网.不同局域网共享和连接打印机设置 (附安装步骤图片) 注:我是自己写的从word文档复制出来给需要的朋友共享的,图片复制不了,一张张保存再上传,麻烦,图片比较多,所以图片不上传 ...

vue实现连接打印机功能

1.安装依赖

2.挂载依赖

3.包装元素

4.创建打印按钮

5.批量打印分页

vue实现连接打印机功能相关推荐

最新文章

热门文章