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

最新推荐文章于 2025-04-10 16:47:47 发布

布尔程

最新推荐文章于 2025-04-10 16:47:47 发布

阅读量9.8k

点赞数

分类专栏：前端 Vue

本文链接：https://blog.youkuaiyun.com/William0326/article/details/86029682

版权

这篇博客分享了在Vue项目中根据table勾选数据动态生成二维码并批量打印的实现过程。首先通过npm安装qrcodejs2，然后在功能界面引入并使用，最后展示如何在打印方法中拼接生成二维码的HTML字符串，实现批量打印。博主提到该解决方案仍有优化空间，欢迎读者提供改进建议，并推荐了其他相关博客文章作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

布尔程

关注关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 二维码，打印

sinat_42501006的博客

04-22

1904

//安装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....

vue3 使用QrCode生成二维码

Macao7_W的博客

04-01

1万+

Vue使用QrCode

7 条评论您还未登录，请先登录后发表或查看评论

VUE项目开发实践——引入二维码和条形码功能

Y_anCy的博客

07-10

3199

//生成课程二维码功能 npm install--save qrcode //导入第三方插件 <div id = "qrcode" > 二维码位置 </div> import QRCode from 'qrcodejs2' qrcode: function() { //let videoNameUrl = "http://xxx.xxx.net/VideoCourse....

利用Qrcode批量生成二维码

07-25

利用QrCodeNet批量生成二维码，并附有导出，排版打印功能。

vue实现二维码生成器和解码器

最新发布

cf8833的博客

04-10

622

4.静区（quiet zone）支持：通过quietZone调整周围的空白区域。7.Logo嵌入：在二维码中间添加logo，可调整大小、边距、背景色和圆角。10.视图框调整：根据静区计算viewBox，确保正确显示。9.响应式更新：当props变化时自动重新生成二维码。1.生成基本二维码：根据输入的value生成二维码。6.渐变效果：启用线性渐变，可以自定义方向和颜色。3.颜色和背景色：设置二维码颜色和背景。2.可定制尺寸：通过size调整大小。8.错误处理：生成失败时显示错误信息。

vue项目中批量打印二维码

weixin_30271335的博客

12-14

1247

前提：项目中要打印的二维码为后台返回，批量选择后，点击打印，先打开二维码预览界面，再执行打印。以下代码中 codePicList为选中的二维码数组。重点css:page-break-after:always 在元素后插入分页符;在打印时，要分页（需求是每个二维码打印在一张纸上） // 此代码为浏览界面遍历出来的要打印的多个二维码<ul id="codeImgviewer"...

vue 批量打印二维码含LOGO图片

灰色头像@的博客

09-06

793

实现效果如下图↓。

vue生成二维码并打印

userpdk的博客

08-04

514

【代码】vue生成二维码并打印。

vue中实现动态生成二维码的方法

10-15

在Vue.js框架中，动态生成二维码是一项常见的需求，特别是在实现分享、追踪等功能时。本文将详细介绍如何在Vue项目中利用`qrcodejs2`库来创建动态二维码。首先，我们需要安装`qrcodejs2`模块。在命令行中运行以下...

新版之后的js批量生成二维码！！！

01-29

1. **qrcode-generator** 库：这是一个纯JavaScript实现的二维码生成库，它允许你通过传入特定的数据和参数来生成二维码。例如： ```javascript var qr = qrcode(0, 'L'); qr.addData('你的数据'); qr.make(); ...

vue启用打印机打印-二维码条形码打印

qq_41206305的博客

10-11

1448

使用px来设置距离需谨慎，相同px在不同纸张呈现大小可能是不相同的。小距离的变动px是无法呈现的。（举个栗子：在某一纸张上1px=0.3mm，此时我只想上移0.2mm）构建所需要打印的内容，利用vue-print-nb进行打印。二维码条形码打印的本质就是图片打印。注意：在页面上设置的样式打印时是没效果的，这里需要用过媒体查询来设置样式。所需插件 vue-print-nb 本文版本1.7.5。资产、设备管理必备的二维码条形码打印。

vue-qr 二维码 批量导出

qq_39056703的博客

08-09

902

首先我们需要安装三个插件 "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"

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

4330

Node Express 实现前端批量打印,要注意修改打印机的缓存大小,批量打印时,文本过大,打印机默认缓存太小,打不出来(欢迎批评指正!)

vue中生成二维码

happysmartgirl的博客

04-28

252

方法一 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

379

【代码】图片地址生成二维码。

VUE打印每页顶部添加一个二维码

五月慵懒的猫的博客

10-21

648

目录需求主要是实现原理完整代码 html打印文件 Print.js二维码生成插件 qrcode.js 需求最近公司项目在开发一个在线合同填写的功能，要求填写完成之后打印出来，然后签字，再将合同拍照上传到系统中，为了更好的识别区分每一份合同，就要求在打印的时候每一张合同上面都添加一个携带基本信息的二维码。主要是实现原理利用table表格以及table中thead标签中的style="display: table-header-group"属性 <thead style="display:

Vue批量生成二维码并分页打印，组件形式实现

chen_CJH的博客

02-09

3002

Vue批量生成二维码并分页打印，组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件； // 终端执行 npm install qrcodejs2 --save 创建对应二维码生成及打印组件组件代码: <template> <div id="qrCodeDiv" style="display:none;">  <div v-for

Vue3实现批量打印二维码与条形码

m0_51734815的博客

07-25

3357

这篇文章是我在工作途中对vue3批量生成二维码的一些见解，例如vue-qr（二维码）与jsbarcode（条形码）在vxe-table表格中的使用,二维码与条形码的批量生成与打印（打印时一页一个码）等。

vue-qr批量生成二维码并打包

05-10

要批量生成二维码并打包，你可以使用以下步骤： 1. 安装 vue-qr 插件：在命令行中运行 `npm install vue-qr --save`，或者在项目目录下运行 `yarn add vue-qr`。 2. 创建一个二维码生成器组件：在 Vue 应用中创建一个新的组件，用于批量生成二维码。在组件中使用 vue-qr 插件来生成二维码。 3. 创建一个数据源：在组件中创建一个数据源，用于存储所有要生成二维码的数据。可以使用数组或对象存储数据。 4. 使用 v-for 指令循环生成二维码：在组件中使用 v-for 指令循环遍历数据源，使用 vue-qr 插件生成二维码，并将生成的二维码添加到页面中。 5. 打包生成的二维码：在组件中添加一个按钮，当用户点击按钮时，使用 jszip 插件将所有二维码打包成一个压缩文件，并将文件下载到本地。以下是一个简单的示例代码： ```html <template> <div> <div v-for="(data, index) in dataSource" :key="index"> <p>{{ data.name }}</p> <qrcode :value="data.code"></qrcode> </div> <button @click="handleDownload">Download</button> </div> </template> <script> import VueQr from 'vue-qr' import JSZip from 'jszip' import FileSaver from 'file-saver' export default { components: { VueQr }, data() { return { dataSource: [ { name: 'Qrcode 1', code: 'https://www.example.com/1' }, { name: 'Qrcode 2', code: 'https://www.example.com/2' }, { name: 'Qrcode 3', code: 'https://www.example.com/3' } ] } }, methods: { handleDownload() { const zip = new JSZip() this.dataSource.forEach((data, index) => { const imgData = this.$refs[`qrcode${index}`][0].$el.toDataURL() zip.file(`${data.name}.png`, imgData.substr(imgData.indexOf(',') + 1), { base64: true }) }) zip.generateAsync({ type: 'blob' }).then((content) => { FileSaver.saveAs(content, 'qrcodes.zip') }) } } } </script> ``` 在上述示例代码中，我们使用了 vue-qr 插件来生成二维码，使用 jszip 插件将所有二维码打包成一个压缩文件，并使用 file-saver 插件将文件下载到本地。注意，我们使用了 $refs 来获取每个二维码组件的实例，并将实例转换为图片数据进行打包。