vuecli3 批量打印二维码

news2024/9/30 13:16:12

 安装以个命令:

npm install qrcode --save
 npm install print-js --save

页面使用:

import qrcode from 'qrcode'
import printJS from 'print-js'
   <el-button type="primary" @click="handleBulkPrint"
                      >批量打印</el-button
                    >
  methods: {
    
  // 批量打印
    handleBulkPrint () {
      // 选中数据
      if (this.multipleSelection.length == 0) {
        return this.$message.warning('请选择要打印的数据!')
      }
      // 创建一个空的打印任务数组
      const printContents = []
      const qrCodeData = this.multipleSelection
      // 循环生成二维码并打印
      for (let i = 0; i < qrCodeData.length; i++) {
        const { entityCode } = qrCodeData[i]
        // 生成二维码图片
        qrcode.toDataURL(entityCode, (err, qrCodeImage) => {
          if (err) {
            this.$message.error('错误打印!', err)
          }
          // 创建一个包含要打印的内容的div元素
          const content = document.createElement('div')
          content.innerHTML = `<img src='${qrCodeImage}'>
          <p>样品编号:${entityCode}</p>`
          printContents.push(content)
          // 将图片添加到文档中
          document.body.appendChild(content)
          // 如果是最后一个二维码,则进行打印操作
          if (i === qrCodeData.length - 1) {
            printJS({
              printable: printContents.map((content) => content.innerHTML),
              type: 'raw-html',
              style:
                '@media print { img { width: 100%; } p{text-align: center;}}'
            })
            // 移除所有的图片元素
            printContents.forEach((content) =>
              document.body.removeChild(content)
            )
          }
        })
      }
    },
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1180954.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

发布成绩看这里

你是否曾经在成绩发布时手忙脚乱&#xff0c;为处理大量的成绩数据而感到烦恼&#xff1f;现在&#xff0c;让我们一起探讨如何利用代码和Excel实现学生自助查询成绩的功能。 一、使用Excel处理成绩数据 收集成绩数据首先需要将学生的成绩数据收集起来。最方便的方法是使用Exce…

明星和KOL的影响力是医美产品推广的加速器

在当今时代&#xff0c;越来越多的人开始关注自身外貌和健康。医美类产品应运而生&#xff0c;为人们的美丽和自信带来了无限可能。然而&#xff0c;面临激烈的市场竞争&#xff0c;医美类产品在营销推广方面必须做出差异化和创新化的努力&#xff0c;才能取得成功。 一、打造独…

OpenAI 首届开发者大会-亮点多多

正如 Sam Altman 此前所言&#xff0c;OpenAI 首届开发者大会为人们带来了一些非常棒的新东西。 继今年春天发布 GPT-4 之后&#xff0c;OpenAI 又创造了一个不眠夜。 过去一年&#xff0c;ChatGPT 绝对是整个科技领域最热的词汇。OpenAI 也依靠 ChatGPT 取得了惊人的成绩&…

鸿蒙原生应用开发-DevEco Studio本地模拟器的使用

使用Local Emulator运行应用/服务 DevEco Studio提供的Local Emulator可以运行和调试Phone、TV和Wearable设备的HarmonyOS应用/服务。在Local Emulator上运行应用/服务兼容签名与不签名两种类型的HAP。 Local Emulator相比于Remote Emulator的区别&#xff1a;Local Emulator是…

一文掌握 Apache SkyWalking

Apache SkyWalking SkyWalking是一个开源可观测平台&#xff0c;用于收集、分析、聚合和可视化来自服务和云原生基础设施的数据。SkyWalking 提供了一种简单的方法来保持分布式系统的清晰视图&#xff0c;甚至跨云。它是一种现代APM&#xff0c;专为云原生、基于容器的分布式系…

idea Error: java: OutOfMemoryError: insufficient memory处理

IDEA设置里&#xff0c;修改heap size更大一点&#xff0c;可以解决问题

Solidity快速入门之函数输出

返回值return和returns Solidity有两个关键字与函数输出相关&#xff1a;return和returns&#xff0c;他们的区别在于&#xff1a; returns加在函数名后面&#xff0c;用于声明返回的变量类型及变量名&#xff1b;return用于函数主体中&#xff0c;返回想要返回的变量&#x…

1560分钟一节课VUE项目从入门到精通

在职场&#xff0c;流传着这样一句话&#xff1a;跳槽加薪是现实&#xff0c;原地加薪是梦想。工作跳一跳&#xff0c;工资翻一番。 事实好像确实如此&#xff0c;相关机构调研发现&#xff0c;跳槽换工作后的平均加薪幅度能达到36%&#xff01; ▲ 图源网络&#xff0c;如侵删…

nodejs统计文件/文件夹数量

nodejs统计文件/文件夹数量 const fs require(fs); const path require(path);const htmlList []; const cssList []; const jsList []; let fileNum 0 let filesNum 0 function getFiles(dir) {const folders fs.readdirSync(dir);folders.forEach((folderName) >…

卡博替尼Cabozantinib使用说明书、副作用、使用方法、不良反应

&#xff08;图片来源于网络&#xff09; 卡博替尼&#xff08;Cabozantinib&#xff09;是一种靶向药物&#xff0c;属于多受体酪氨酸激酶抑制剂。它被用于治疗多种癌症&#xff0c;包括进行性、转移性甲状腺髓样癌、晚期肾癌和二线治疗晚期肝癌。卡博替尼可以阻断涉及癌细胞…

基于springboot实现招生平台管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现招生管理系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括招生管理系统的网络应用&#xff0c;在外国招生管理系统已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步阶段。招…

一文吃透Redis主从复制的原理

1. 引言 之前我们聊过 Redis 的数据结构底层原理和持久化机制&#xff0c;这期我们来聊 Redis 的高可用主题。 时光穿梭机&#xff1a; Redis持久化都说不明白&#xff1f;那今天先到这吧~Redis数据结构的底层原理 众所周知&#xff0c;一个数据库系统想要实现高可用&#…

GNU链接脚本详解

0. 前言 每一个链接都是由链接脚本控制的&#xff0c;链接脚本是用链接命令语言编写的脚本。链接都会用到一个链接脚本&#xff0c;如果你没有指定自己的脚本&#xff0c;就会使用默认的链接脚本。可以用 "--verbose" 命令行选项显示默认的连接脚本。指定命令行参数…

Unreal Engine 学习笔记 (2)—— 走跑切换

1.创建并编辑混合空间 鼠标右击内容浏览器选中动画选中混合空间1D选择对应的骨骼重命名为1D双击1D的图标&#xff0c;进入混合空间的编辑界面鼠标点开水平坐标标签设置名称为Speed设置最大轴值为600拖放对应动画到采样点中 2.创建动画蓝图 鼠标右击内容浏览器选中动画选中动…

【NLP】特征提取: 广泛指南和 3 个操作教程 [Python、CNN、BERT]

什么是机器学习中的特征提取&#xff1f; 特征提取是数据分析和机器学习中的基本概念&#xff0c;是将原始数据转换为更适合分析或建模的格式过程中的关键步骤。特征&#xff0c;也称为变量或属性&#xff0c;是我们用来进行预测、对对象进行分类或从数据中获取见解的数据点的…

国自然中标越来越难,怎样才能赢在起跑线上?

众所周知&#xff0c;国自然在学术界的地位和影响力不容小觑。“国自然在手&#xff0c;天下我有”&#xff0c;对于科研人来说&#xff0c;成功申报国自然&#xff0c;有助于职称评审、职业升迁&#xff0c;同时&#xff0c;获得不菲的科研经费。据了解&#xff0c;有些高校还…

MCU常见通信总线串讲(一)—— UART和USART

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言一…

第七章 图【数据结构与算法】【精致版】

第七章 图【数据结构与算法】【精致版】 前言版权第七章 图7.1 应用实例7.2图的基本概念7.3图的存储结构7.3.1邻接矩阵**1-邻接矩阵.c****2-邻接矩阵plus.c** 7.3.2 邻接表**3-邻接表.c** **4-邻接表plus.c** 7.3.3 十字链表7.3.4多重链表 7.4图的遍历7.4.1深度优先搜索遍历**5…

每天一点python——day62

为了方便复制&#xff0c;我在下面附带了一个python文件。 C:\Users\Admin>python Python 3.9.13 (main, Aug 25 2022, 23:51:50) [MSC v.1916 64 bit (AMD64)] :: Anaconda, Inc. on win32Warning: This Python interpreter is in a conda environment, but the environmen…

【蓝桥杯选拔赛真题13】C++最短距离 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析

C/C++最短距离 第十二届青少组蓝桥杯C++选拔赛真题 一、题目要求 1、编程实现 有一个居民小区的楼房全是一样的,并且按矩阵样式排列。其楼房的编号为 1,2,3……,当排满一行时,从下一行相邻的楼往反方向排号。 例如:小区为 3 行 6 列,矩阵排列方式: 要求:已知小区…