vue使用qrcode动态生成二维码及批量打印实现

最新推荐文章于 2024-08-07 22:08:53 发布
最新推荐文章于 2024-08-07 22:08:53 发布
阅读量9.7k 收藏 16
点赞数
分类专栏： 前端 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/William0326/article/details/86029682
版权
这篇博客分享了在Vue项目中根据table勾选数据动态生成二维码并批量打印的实现过程。首先通过npm安装qrcodejs2，然后在功能界面引入并使用，最后展示如何在打印方法中拼接生成二维码的HTML字符串，实现批量打印。博主提到该解决方案仍有优化空间，欢迎读者提供改进建议，并推荐了其他相关博客文章作为参考。
摘要由CSDN通过智能技术生成

最近项目中遇到要更具table勾选的数据动态生成二维码并批量打印，网上页查找了很多资料，都不是很全面，最后自己研究琢磨实现了对应功能，现分享出来，供后期参考及大家一起学习探讨。

前期准备：qrcode的使用及对应文档参考。
（1）将qrcode引入到项目

在命令窗口中，输入：npm install qrcodejs2 --save

引入后，你如果可以在对应的依赖（package.json）中查看到如下结构：

 那恭喜你引入对应包成功了。接下来便是在对应的功能中如何使用了。

（2）在对应的功能界面引入qrcode

import QRCode from 'qrcodejs2'     这个相比稍微会点vue的都知道在哪里引入，就不赘述了，实在不知道的可以留言。

（3）实际的使用（这里以批量生成并打印为例），单一生成打印相对简单，类

最低0.47元/天 解锁文章
布尔程
关注
专栏目录
vue 二维码，打印
sinat_42501006的博客
04-22 1850
//安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js@版本号 --save // 全局安装 npm install print-js --save -g 安装qrcodejs2 npm install qrcodejs2 --save main.js import Print from 'vue-printjs' Vue....
vue 使用qrcodejs2生成二维码及打印功能实现
06-26
demo示例
利用Qrcode批量生成二维码
07-25
利用QrCodeNet批量生成二维码，并附有导出，排版打印功能。
Vue 批量生成二维码
最新发布
qq_41470863的博客
08-07 174
【代码】Vue 批量生成二维码。
vue项目中批量打印二维码
weixin_30271335的博客
12-14 1210
前提：项目中要打印的二维码为后台返回，批量选择后，点击打印，先打开二维码预览界面，再执行打印。 以下代码中 codePicList为选中的二维码数组。重点css:page-break-after:always 在元素后插入分页符;在打印时，要分页（需求是每个二维码打印在一张纸上） // 此代码为浏览界面遍历出来的要打印的多个二维码<ul id="codeImgviewer"...
vue 批量打印二维码含LOGO图片
灰色头像@的博客
09-06 695
实现效果如下图↓。
vue-qr 二维码 批量 导出
qq_39056703的博客
08-09 823
首先我们需要安装三个插件 "jszip"//zip打包 "file-saver"//文件保存 "vue-qr"//二维码 完整代码如下: src/components/base/qrcode.vue <template> <div> <div v-for="(item, index) in qrCodeData" :key="index"> <vue-qr :id_name="'qcode_' + index"
vue中实现动态生成二维码的方法
10-15
在Vue.js框架中，动态生成二维码是一项常见的需求，特别是在实现分享、追踪等功能时。本文将详细介绍如何在Vue项目中利用`qrcodejs2`库来创建动态二维码。 首先，我们需要安装`qrcodejs2`模块。在命令行中运行以下...
Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码
wwyxjjz的博客
11-24 9108
1.下载 npm install qrcode --save-dev 2.引入(在所需要的页面中引入) import QRCode from “qrcode”; //引入生成二维码插件 3.生成二维码 <canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas> <script...
新版之后的js批量生成二维码！！！
01-29
1. **qrcode-generator** 库：这是一个纯JavaScript实现的二维码生成库，它允许你通过传入特定的数据和参数来生成二维码。例如： ```javascript var qr = qrcode(0, 'L'); qr.addData('你的数据'); qr.make(); ...
vue2 使用vue-qr生成二维码并打印二维码
热门推荐
MyOxygen的博客
06-27 1万+
生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)实现勾选表格的数据，用表格的selection-change事件，当勾选的数据发生变化时，实时获取到已勾选的数据。该功能需要用到vue-print-nb打印插件，需先安装插件。修改该值可改变实点的颜色，即二维码整体展示的颜色。记录使用vue-qr生成二维码的过程。二维码的内容，即扫出来的结果。存放已勾选的数据生成的二维码。
NodeJs+VueJs +前端实现批量打印二维码
qq_38740611的博客
08-09 4259
Node Express 实现前端批量打印,要注意修改打印机的缓存大小,批量打印时,文本过大,打印机默认缓存太小,打不出来(欢迎批评指正!)
vue中生成二维码
happysmartgirl的博客
04-28 220
方法一 npm install --save qrcodejs2 在vue文件中 <template> <div> <div class="code" ref="qrCodeUrl"></div> <div class="code2" ref="code2"></div> </div> </template> <script> import QRCode from 'qrcodejs
图片地址生成二维码、vue-print-nb打印插件
高艳艳的博客！
04-26 280
【代码】图片地址生成二维码。
VUE打印 每页顶部添加一个二维码
五月慵懒的猫的博客
10-21 587
目录需求主要是实现原理完整代码 html打印文件 Print.js二维码生成插件 qrcode.js 需求 最近公司项目在开发一个 在线合同填写 的功能，要求填写完成之后打印出来 ，然后签字，再将合同拍照上传到系统中，为了更好的识别区分每一份合同，就要求在打印的时候每一张合同上面都添加一个携带基本信息的二维码。 主要是实现原理 利用table表格 以及table中thead标签中的style="display: table-header-group"属性 <thead style="display:
Vue批量生成二维码并分页打印，组件形式实现
chen_CJH的博客
02-09 2853
Vue批量生成二维码并分页打印，组件形式实现一. 最终效果二. 实现方式 一. 最终效果 二. 实现方式 安装qrcodejs2插件； // 终端执行 npm install qrcodejs2 --save 创建对应二维码生成及打印组件 组件代码: <template> <div id="qrCodeDiv" style="display:none;"> <!-- 使用css样式对生成的二维码打印时定义了分页 --> <div v-for
Vue3实现批量打印二维码与条形码
m0_51734815的博客
07-25 2878
这篇文章是我在工作途中对vue3批量生成二维码的一些见解，例如vue-qr（二维码）与jsbarcode（条形码）在vxe-table表格中的使用,二维码与条形码的批量生成与打印（打印时一页一个码）等。
vue中 生成二维码 并自动批量下载
WWW_share8的博客
02-18 2122
项目中经常又这样的需求，要求将字符串生成二维码，并下载下来 一般分为 生成一个二维码展示并下载，对于这种你只需调用qrcodejs2生成二维码就可以了 下载也是按钮触发 今天我们要说的是 批量下载，具体做法是 首先下载资源 npm install qrcodejs2 --save 在对于的文件中引入，在template中添加如下的html代码 <div id="qr...
vue中使用qrcode 生成二维码
03-14
在Vue中使用qrcode生成二维码可以通过第三方库来实现。一个常用的库是`vue-qrcode`，它提供了一个简单的组件来生成二维码。 首先，你需要安装`vue-qrcode`库。可以使用npm或者yarn来进行安装： ``` npm install vue-qrcode ``` 或者 ``` yarn add vue-qrcode ``` 安装完成后，在你的Vue组件中引入`vue-qrcode`库： ```javascript import VueQrcode from 'vue-qrcode'; export default { components: { VueQrcode, }, // ... } ``` 然后，在模板中使用`vue-qrcode`组件来生成二维码： ```html <template> <div> <vue-qrcode :value="qrCodeData" :size="200"></vue-qrcode> </div> </template> ``` 在上面的例子中，`qrCodeData`是一个包含要生成二维码的数据的变量，`size`是二维码的尺寸。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值