Vue使用Object标签对接IC读卡器硬件

最新推荐文章于 2024-01-10 09:17:55 发布
最新推荐文章于 2024-01-10 09:17:55 发布
阅读量1.5k 收藏 4
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DriverFang/article/details/124959630
版权

最近公司的一个项目其中有一块是涉及到读取和写入卡片信息，这边发现Object标签在Vue里似乎无法使用，于是便想到了使用iframe标签来展示内容并进行Vue和iframe之间参数的传递。废话不多说，直接上代码。

1.iframe向Vue传参

（1）通过postMessage函数传递参数

 

（2）在Vue页面通过监听接收到Iframe传来的参数

2.Vue向iframe传参

（1）首先需要获取到iframe的内容

（2）通过点击事件将需要传递的参数传递到iframe页面

（3）在Iframe页面接收参数

Heyy0415
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue读取终端硬件信息_vue利用objActiveX对象获取硬件信息（扫身份证登录）
weixin_39632982的博客
12-30 1599
vue中使用就J10设备刷身份证，获取用户身份证信息并登录系统,项目用的是element组件，所以部分为element里的元素。image.png如图所示，找到驱动安装的位置，然后用编辑器打开测试页找到object标签templete部分复制到vue文件中，并添加内部样式position:absolute取消占位，添加input标签，大小设置为1像素，背景色、文字颜色，border等设置透明用来获...
html前端通过websoket与读卡器交互
11-06
功能：html+css+js开发web前端，通过websoket通讯实现与读卡器等硬件设备的信息交互。
Vue实现多标签选择器
10-15
主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
object标签的使用
weixin_43837268的博客
05-29 4055
<template> <div> <div> <object width="100%" :height="curHeight" :data="NanJingBankUrl"></object> </div> <div class="Back...
Vue调用硬件 接口报错
regretTAT的博客
08-08 209
调用身份证读卡器，使用谷歌浏览器 读卡器硬件的接口 有几率是被谷歌拦截 所以报错。如果大家的问题没解决 也可以去看看希望能对你有所帮助。搜索 block 找到这个选项。切换状态之后重启浏览器即可。当时找的这篇文章 解决问题。谷歌浏览器调用硬件报错。
uniApp使用hexiii-nfc.js实现nfc刷ic功能
Benz_s600的博客
12-03 4224
uniApp使用hexiii-nfc.js实现nfc刷卡功能
在vue中使用mqtt.js连接硬件
weixin_48549175的博客
05-01 1753
mqtt是物联网中常用的一种通讯协议，有的时候我们需要使用这个技术来连接硬件，获取传感器数据在网页上实时显示并变化，或者在网页上操控硬件的变化。今天讲一下在vue中使用mqtt.js的方法。 首先要npm下载 npm install mqtt <template> <div class="hello"> <h1>收到的消息:{{ msg }}</h1> <button @click="handleclick">发布</b
electron-vue实现与硬件进行串口通信
Tsinbo1314的博客
04-25 4375
背景：项目需求，在electron桌面应用中，实现与硬件进行串口通信，一番调研，选择了契合度高的serialport 插件地址：Node Serialport 插件选择好了，接下来就是集成实现功能，它这个集成是有坑的 因为版本的问题，导致在集成完后报错 在网上查了各种错误，最终总结为以下步骤： 前置条件 1.确保你的电脑中装有python环境，并且环境为2.7（很重要） 2.安装 npm install --global --production windows-build-tools 3.
object标签预览PDF文件
LY__lyxka的博客
04-15 1869
前端页面实现预览在线PDF文件 1.利用原生标签object <object width="100%" height="100" data="url" type="appcation/pdf"> 2.在vue-cli项目中中利用object <template> <div> <object width="100%" :height="clientHeight" :data="fileUrl" type="appcation/pdf">
vue项目中object内嵌html链接
qq_37485170的博客
08-18 503
在做项目是通常会遇到两方平台对接打通，需要把html的页面内嵌到vue的项目里，做到两方内容打通。object内嵌,
使用vue制作滑动标签
12-30
本文实例为大家分享了vue制作滑动标签的具体代码，供大家参考，具体内容如下 第一步：写出HTML结构 先写一个你需要展示的静态效果，写好后再改为VUE动态生成，代码如下： <li class=active><a>标签1</a></li> ...
获取硬件信息
weixin_44231643的博客
05-21 931
获取硬件信息 调用WindowsAPI实现获取硬件信息 获取物理内存大小 这里只解析了物理内存大小，其余内存信息可以按需要提取 对物理内存大小做了向上的取整 默认返回的内存大小为Byte，这里转换为了GB #define GB (1024*1024*1024) MEMORYSTATUSEX statusex; statusex.dwLength = sizeof(st...
vue获取设备硬件信息
swoly2894265391的博客
09-20 1797
vue通过node获取设备硬件信息,硬件序列号等,借用os模块及通过child_process包借用shell来执行命令行命令(不分Uint8阵列数据转换)
利用Web Serial API实现Vue与单片机串口通信
Stanford_sun的博客
06-03 4922
浏览器版本：Google Chrome 版本 113.0.5672.127Node.js版本：Node.js v16.9.1Vue脚手架版本：@vue/cli 5.0.8Vue版本：vue : 3.2.13Element-plus版本：element-plus: 2.3.5Web Serial API 提供了一些接口函数，用于在浏览器中访问串行端口设备并与之通信。以下是常用的 Web Serial API 接口函数：navigatorserial()
vue网页调用华视电子身份证阅读器cvr-100uc
charlie_y的博客
12-08 1484
接到一个前端调用身份证读卡器的需求，提供的设备是华视CVR-100uc，记录一下开发过程。
【vue调用身份证读卡器】
regretTAT的博客
05-11 1644
此js文件是在安装驱动的基础上可以使用、作用就是建立长连接拿到数据。目的：vue项目接入设备读取并获取一系列信息。在需要读取身份证信息的页面引入js文件。定义好之后 在vue页面中引入。
简单一个VUE 集成USB READER 读卡器
Zihuatanjo
01-15 3923
后台管理 vue-elment-admin 表格库vxe-table2.9表格操作区域=>点击取卡=>弹框=>刷卡=>赋值弹框内的input这个东西演示(虚假数据,演示用途)
Vue3卡片（Card）
Mr Dear的博客
07-18 3331
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
基于SpringBoot+Vue的会员卡管理系统设计实现(源码+lw+部署文档+讲解等)
最新发布
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
01-10 985
💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》微信小程序项目精品案例《500套》🌟文末获取源码+数据库🌟。
vue中浏览器链接usb读卡器
06-02
在Vue中使用WebUSB API连接USB读卡器的方法与在普通网页中连接USB读卡器的方法是相同的。您需要使用WebUSB API请求用户授权，并使用设备对象进行读卡操作。 以下是一个示例Vue组件，演示如何在Vue中使用WebUSB API连接USB读卡器： ```vue <template> <div> <button @click="connectToDevice">Connect to Device</button> </div> </template> <script> export default { data() { return { device: null, isDeviceConnected: false }; }, methods: { async connectToDevice() { try { // 请求用户授权连接设备 this.device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] }); console.log('Device connected:', this.device); this.isDeviceConnected = true; // 在这里使用设备进行读卡操作 } catch (error) { console.log('Error connecting to device:', error); } } } }; </script> ``` 在这个示例中，我们创建了一个按钮，用于触发连接USB设备的操作。在`connectToDevice()`方法中，我们使用`navigator.usb.requestDevice()`方法请求用户授权连接一个vendor ID为0x1234的设备。如果用户授权成功，我们将保存设备对象，并设置一个`isDeviceConnected`标志，表示设备已连接。 请注意，您需要将此组件包含在HTTPS页面中，以便使用WebUSB API。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值