vuecli3 批量打印二维码

安装以个命令:

bash 复制代码
npm install qrcode --save
bash 复制代码
 npm install print-js --save

页面使用:

javascript 复制代码
import qrcode from 'qrcode'
import printJS from 'print-js'
javascript 复制代码
   <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)
            )
          }
        })
      }
    },
    }
相关推荐
再吃一根胡萝卜16 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤16 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly2116 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐16 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖16 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温16 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯16 小时前
日常小常识记录
前端
那一抹阳光多灿烂16 小时前
CSS 编码规范
前端·css
degree52016 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・16 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css