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

指令打印的方法


相关文章
|
移动开发 Java API
HTML 插件详解
HTML中的插件如Flash、Java applets和ActiveX控件曾广泛用于扩展网页功能,但因安全性问题和跨浏览器兼容性不佳而逐渐被淘汰。现代替代方案包括HTML5的`&lt;audio&gt;`、`&lt;video&gt;`、`&lt;canvas&gt;`和SVG等,以及WebAssembly和各种JavaScript API(如WebRTC和WebGL),这些新技术不仅提升了网页性能和安全性,还改善了用户体验。建议开发者优先采用HTML5和相关API。
|
移动开发 JavaScript 前端开发
HTML5最新经典俄罗斯方块游戏插件
HTML5最新经典俄罗斯方块游戏插件
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
311 50
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
325 1
利用html2canvas插件自定义生成名片信息并保存图片
WordPress插件介绍页源码单页Html源码
WordPress插件介绍页源码单页Html源码
359 2
WordPress插件介绍页源码单页Html源码
|
JavaScript 前端开发
|
JSON JavaScript 前端开发
vue如何更好的解决浏览器兼容问题
vue如何更好的解决浏览器兼容问题
731 1
|
存储 JavaScript 程序员
Vue学习之---浏览器本地存储(8/17)
这篇文章介绍了Vue中浏览器本地存储的使用方法,包括基础知识、localStorage和sessionStorage的代码实例及其测试效果,并提供了相关的API和操作示例。
Vue学习之---浏览器本地存储(8/17)
|
Web App开发 JavaScript 前端开发
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用

热门文章

最新文章