vuecli3 批量打印二维码

 安装以个命令:

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)
            )
          }
        })
      }
    },
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

小H靶场学习笔记:DC-1

DC-1 Created: November 8, 2023 11:41 PM Tags: Drupal, SUID提权 Owner: 只惠摸鱼 打靶场过程 nmap扫描 存活主机 192.168.199.128可能性更大 8011122端口开发 &#xff0c;访问跳转出Drupal页面&#xff0c;确定为靶机 使用插件进行指纹识别 可知以下信息&#xff1a…

Android Studio导入,删除第三方库

Android项目经常用到无私的程序员们提供的第三方类库。本篇博客就是实现第三方库的导入和删除。 一、导入第三方库 1、将需要的库下载到本地&#xff1b; 2、新建Moudle (1)File --- New Moudle (2)选择Android Library --- Next (3)填写Moudle名 --- Finish。一个新的Mou…

变电站自动化系统中的安全措施分析及应用-安科瑞

安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;阐述变电运行中的问题&#xff0c;电气自动化系统与安全运行措施&#xff0c;包括自动控制设备的投入&#xff0c;电气自动 化与计算机技术相、设备数据的采集与处理、自动化系统的升级、人工智能技术的应用。 关键…

【Git】Git 学习笔记_操作本地仓库

1. 安装与初始化配置 1.1 安装 下载地址 在文件夹里右键点击 git bash here 即可打开命令行面板。 git -v // 查看版本1.2 配置 git config --global user.name "heo" git config --global user.email xxxgmail.com git config --global credential.helper stor…

深度学习入门-基于Python的理论与实现摘要记录

基本是《深度学习入门-基于Python的理论与实现》的复制粘贴&#xff0c;以作为日后的检索和查询使用 感知机 感知机接收多个输入信号&#xff0c;输出一个信号。 感知机原理 感知机接收多个输入信号&#xff0c;输出一个信号。 图2-1是一个接收两个输入信号的感知机的例子。…

uniapp:打包ios配置隐私协议框

使用uniapp打包ios 上架商店需要配置隐私协议政策弹窗。当用户点击确定后才能继续操作。 首先manifest.json中配置使用原生隐私政策提示框是不支持ios的。不用勾选。 解决思路&#xff1a; 1、新建页面&#xff1a;iosLogin.vue&#xff0c;pages.json中 这个页面需要放在第一…

计算机网络:概述

0 学时安排及讨论题目 0.1讨论题目&#xff1a; CSMA/CD协议交换机基本原理ARP协议及其安全子网划分IP分片路由选择算法网络地址转换NATTCP连接建立和释放再论网络体系结构 0.2 本节主要内容 计算机网络在信息时代中的作用 互联网概述 互联网的组成 计算机网络在我国的发展 …

extractvalue报错注入理论及实战

报错注入 什么是报错注入 构造语句&#xff0c;让错误信息中夹杂可以显示数据库内容的查询语句&#xff0c;返回报错提示中包括数据库中的内容 如上图所示&#xff0c;通过group by的报错&#xff0c;我们可以知道列数是多少 输入正确的查询数据库的SQL语句&#xff0c;虽然可…

Zookeeper经典应用场景实战(二)

1. Zookeeper 分布式锁实战 1.1 什么是分布式锁 在单体的应用开发场景中涉及并发同步的时候&#xff0c;大家往往采用Synchronized&#xff08;同步&#xff09;或者其他同一个JVM内Lock机制来解决多线程间的同步问题。在分布式集群工作的开发场景中&#xff0c;就需要 一种更…

android studio 字节码查看工具jclasslib bytecode viewer

jclasslib bytecode viewer 是一款非常好用的.class文件查看工具&#xff1b; jclasslib bytecode editor is a tool that visualizes all aspects of compiled Java class files and the contained bytecode. Many aspects of class files can be edited in the UI. In addit…

excel表的筛选后自动求和

一般都使用subtotal函数。 通过看一个大佬的视频&#xff0c;发现可以有更简单的方法。 首先任意筛选数据(ctrlshiftl)&#xff0c; 然后选中需要求和的列的最下方的空白单元格&#xff0c;再按alt。 回车即可。 实质它还是用的subtotal函数

【TiDB】TiDB CLuster部署

目录 0 大纲 一 集群部署工具TiUP简介 1 TiUP 简介 2 TiUP使用 3 TiUP使用举例 二 TiDB Cluster安装配置需求 1 生产环境硬件需求 2 操作系统需求 三 TIDB部署 1 软硬件需求以及前置检查​编辑 2 安装TiUP 组件 ​3 集群拓扑文件 4 执行部署命令 &#xff08;1&…

Spring Gateway网关服务分析

关键原理解析 基本原理 Spring Cloud Route核心可以概括为Gateway过滤器框架和Route定义和解析两块内容。 DefaultFilter、GatewayFilter、GlobalFilter 三种过滤器的区别及执行顺序 SpringCloud Gateway中的提到的过滤器包括三种类型&#xff1a; DefaultFilter&#xff1…

金融信贷行业如何准确——大数据精准定位获客渠道

通过大数据精准获客&#xff0c;不仅可以及时拦截网址浏览量&#xff0c;还可以访问移动贷款应用软件的高频活跃客户和新注册客户。此外&#xff0c;通过大数据进行准确的客户获取&#xff0c;还可以获得电话座机号码的实时通信记录&#xff0c;捕捉小程序应用程序和关键词搜索…

使用TS进行Vue-Router的Meta类型扩展

文章目录 1、前言2、解决 1、前言 使用Vue-Router时&#xff0c;会将一些字段信息附加到路由的Meta对象里面&#xff0c;比如图标icon&#xff0c;标题&#xff0c;权限等&#xff0c;如下&#xff1a; {path: /billboard/board/:boardId,name: billboardBoard,props: true,c…

【电路笔记】-基尔霍夫电路定律

基尔霍夫电路定律 文章目录 基尔霍夫电路定律1、框架和定义2、基尔霍夫电流定律3、基尔霍夫电压定律4、基尔霍夫定律应用5、基尔霍夫定律的局限性6、总结 在本文中&#xff0c;将介绍最基本、最重要的电路定律之一。 这些定律由德国医生古斯塔夫基尔霍夫 (Gustav Kirchoff) 于 …

apachesolr中简单使用

core使用 首先点击add core 可以看到报错solrconfig.xml不在new_core目录下&#xff0c;new_core是我们点击后自动创建的 那么我们将D:\solr2\solr-9.3.0\solr-9.3.0\server\solr\configsets下的任何一个目录下的conf拷贝到new_core过去 这里是使用_default下的conf目录拷贝…

解决方案 |法大大电子合同推动汽车后市场多元数智化发展

近日&#xff0c;商务部等9部门联合发布《关于推动汽车后市场高质量发展的指导意见》&#xff08;以下简称《指导意见》&#xff09;&#xff0c;明确了汽车后市场发展的总体目标和主要任务&#xff0c;系统部署推动汽车后市场高质量发展&#xff0c;促进汽车后市场规模稳步增长…

kubernetes集群编排——k8s资源监控

资源限制 上传镜像 [rootk8s2 limit]# vim limit.yaml apiVersion: v1 kind: Pod metadata:name: memory-demo spec:containers:- name: memory-demoimage: stressargs:- --vm- "1"- --vm-bytes- 200Mresources:requests:memory: 50Milimits:memory: 100Mi [rootk8s2…

3D可视化字母出现频率_vtkLinearExtrusionFilter

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example参考代码目的&#xff1a;学习与总结 demo解决问题&#xff1a;统计输入文本中字母出现的频率&#xff0c;不区分大小写&#xff0c;使用3D可是化方式进行显示&…