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)
            )
          }
        })
      }
    },
    }
相关推荐
你的人类朋友1 小时前
什么是API签名?
前端·后端·安全
会豪3 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子3 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶3 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子3 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit4 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言