文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb

简介: 文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb

视频链接:

vue实现报表打印的三种方式、适用各种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()函数进行打印

指令打印的方法


相关文章
|
6月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
152 15
|
6月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
165 19
|
6月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
159 2
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
156 50
|
11月前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
318 11
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1593 0
|
Web App开发
HTML学习2---body常用属性以及文本修饰标记
上节 ,我们了解了网站制作相关的基础知识,也了解了制作网站需要用到的语言,以及一些简单的HTML的基础知识学习笔记: 博文链接如下:http://blog.csdn.net/morixinguan/article/details/76457441 这节,来写一下body常用属性以及文本修饰标记 的常用属性(1)bgColor : 网页的背景色。
1560 0
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
下一篇