当前位置:首页 > 编程笔记 > 正文
已解决

vuecli3 批量打印二维码

来自网友在路上 199899提问 提问时间:2023-11-07 19:14:48阅读次数: 99

最佳答案 问答题库998位专家为你答疑解惑

 安装以个命令:

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

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"vuecli3 批量打印二维码":http://eshow365.cn/6-34680-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!