文本,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()函数进行打印

指令打印的方法


相关文章
|
3天前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
3天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
|
4天前
|
Web App开发 移动开发 HTML5
文本,兼容性-----HTML5新增音频和视频标签
文本,兼容性-----HTML5新增音频和视频标签
|
2月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
150 1
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
68 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
20天前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
28 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
2天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
14天前
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
21 3

相关实验场景

更多