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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第1天:Python基础语法(一)

** 1、Python简介 ** Python是一种高级、通用的编程语言&#xff0c;由Guido van Rossum于1989年创造。它被设计为易于阅读和理解&#xff0c;具有简洁而清晰的语法&#xff0c;使得初学者和专业开发人员都能够轻松上手。 Python拥有丰富的标准库&#xff0c;提供了广泛的功…

计算机网络——物理层-物理层的基本概念、物理层下面的传输媒体

目录 物理层的基本概念 传输媒体 物理层的基本概念 在计算机网络中&#xff0c;用来连接各种网络设备的传输媒体种类众多。大致可以分为两类。一类是导引型传输媒体&#xff0c;另一类是非导引型传输媒体。 在导引型传输媒体中&#xff0c;常见的有双绞线、同轴电缆、光纤。…

Linux实现进度条小程序(包含基础版本和模拟下载过程版本)

Linux实现进度条小程序[包含基础版本和模拟下载过程版本] Linux实现进度条小程序1.预备的两个小知识1.缓冲区1.缓冲区概念的引出2.缓冲区的概念 2.回车与换行1.小例子2.倒计时小程序 2.基础版进度条1.的回车方式的打印2.百分比的打印3.状态提示符的打印 3.升级版进度条1.设计:进…

野火霸天虎 STM32F407 学习笔记_3 尝试寄存器映射方式点亮 LED 灯

新建工程 寄存器方式 要命啊&#xff0c;一看名字我就不想试。寄存器新建不得麻烦死。 哎算了为了学习原理&#xff0c;干了。 我们尝试自己写一个寄存器的库函数来引用。 首先我们需要引用 st 官方启动文件 stmf4xx.s&#xff0c;具体用途后面章节再展开讲解。然后我们自…

【漏洞复现】Django_debug page_XSS漏洞(CVE-2017-12794)

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞分析3、漏洞验证 说明内容漏洞编号CVE-2017-12794漏洞名称Django_debug page_XSS漏洞漏洞评级影响范…

蓝桥杯练习

即约分数 题目 思路 遍历所有的x&#xff0c;y&#xff0c;判断x/y是不是即越约分数。 代码 #include <iostream> using namespace std; int gcd(int x,int y) {int r;while(y!0){rx%y;xy;yr;}return x; } int main() {// 请在此输入您的代码int sum4039;//1/y和x/1都…

bug: https://aip.baidubce.com/oauth/2.0/token报错blocked by CORS policy

还是跟以前一样&#xff0c;我们先看报错点&#xff1a;&#xff08;注意小编这里是H5解决跨域的&#xff0c;不过解决跨域的原理都差不多&#xff09; Access to XMLHttpRequest at https://aip.baidubce.com/oauth/2.0/token from origin http://localhost:8000 has been blo…

【JavaEE】实现简单博客系统-前端部分

文件目录&#xff1a; 展示&#xff1a; blog_list.html: <!DOCTYPE html> <html lang"cn"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…

Java SPI机制

Java SPI Java SPI&#xff08;Service Provider Interface&#xff09;是一种在 Java 中实现插件化架构的机制。 SPI 允许开发者定义服务接口&#xff0c;然后实现这些服务接口的不同提供者&#xff0c;使得应用程序在不修改源代码的情况下可以动态地加载、使用不同的服务提供…

Splunk 创建特色 dashboard 报表

1: 背景: 对原有的dashboard 进行增加点东西,特别是文字部分: 比如: 增加:“this is a guidline for how to use performance". 这段话,就不能写在title, 那样,这段文字,会出现在dashboard 的PDF 文件的分割线的上面,不符合要求。 2: 解决问题: 正确的做法是…

vue上传宝塔退出页面404

当我们将vue上传到服务器上点击退出时出现页面404时。 如何解决&#xff1a; 1.如果是element plus框架时&#xff1a; 找到layouts文件里面的components文件下Avatar中的index.vue. 2.添加重新加载&#xff1a;location.reload(); 如果是其他的框架同上 。

要在CentOS中安装Docker

Docker部署 在CentOS中安装Docker要在CentOS中安装Docker&#xff0c;请按照以下步骤进行操作&#xff1a;启动和校验常用命令查看容器启动容器 配置镜像加速 在CentOS中安装Docker 要在CentOS中安装Docker&#xff0c;请按照以下步骤进行操作&#xff1a; 首先&#xff0c;确…