打印机打印的三种方式、适用各种web框架(vue.js/web打印/报表打印)_哔哩哔哩_bilibili
Vue实现打印的方式
第一种打印的方式html 打印
1、谷歌浏览器自带的功能,Ctrl + P,会弹出打印预览界面
2、JavaScrpit的方法也可以弹出同样的页面,可以选择全部打印和局部打印
3、第二种打印的方法是
4、优秀的web打印插件通常支持模版设计功能
5、我们通常要设计好插件的打印模版
6、
7、第三种是指令打印
8、指令打印是通过打印插件向打印机发送指令
9、可以向打印机端口或驱动发送原始指令
10、条码打印机,RFID打印机就有很好的支持
11、指令打印的优势是打印的速度和稳定
具体使用-----12、为了实现局部打印,需要在Vue项目中引用组件
---------------------------------------------------------------------------------------------
如何使用在Vue项目输入npm i vue-print-nb
安装后在Vue项目中进行引入
import Print from 'vue-print-nb'
先在项目中进行跑一跑
再在打印机中添加打印按钮 <button v-print>
选择打印会覆盖整个页面
会整个打印全部页面
如果想要实现局部打印:
局部打印HTML的写法,标签写着id
局部打印的写法,这里写了局部打印的内容
点击打印就可以简单实现局部打印的功能
-----------------------------------------------------------------------------------------------------------------------------
方法2,插件打印,老牌的C-LODOP,很多电商后台和快递后台都在用这个
官网地址
www.lodnp.net/download.html
这里有来跟C-
用来跟C-Lodop通讯的JavaScript的包
将loadop.js引用到的web框架中
在index页面中,引入打印的方法,import {}
接着设计两个打印设计的按钮
新建打印模版
打印设计用来调用C-Lodop的设计窗口
打印预览就是设计一个模版
提供一些常用的空间控件
条形码,二维码,html页面预览等
添加一个超文本框作为标题栏
接着是打印名称
设计完可以直接关闭窗体
预览窗体中可以直接进行打印
也可以添加LODOP.PRINT()函数进行打印
指令打印的方法
?