vue项目中批量打印二维码

最新推荐文章于 2024-09-06 10:32:28 发布

CenterElse

最新推荐文章于 2024-09-06 10:32:28 发布

阅读量2k

点赞数 1

分类专栏：前端开发前端开发、vue 文章标签： js

原文链接：https://www.cnblogs.com/feijiediyimei/p/11136607.html

版权

前端开发同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端开发、vue

12 篇文章 1 订阅

订阅专栏

综合了两个文章实现。首先使用qrcode实现生成。然后window.open和window.print打印
一、生成二维码
（原文链接：https://www.cnblogs.com/feijiediyimei/p/11136607.html）

最近项目有个需求，需要将一个连接生成二维码展示出来，然后在网上找到了QRCode这个插件，这里大致记录下它的使用方法

介绍： QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库

1.安装

因为这个项目用的是vue，所以在vue中安装qrcodejs2包

npm install qrcodejs2 --save

2、引入qrcodejs2包

VUE中引入qrcodejs2包

import QRCode from ‘qrcodejs2’

如果要全局引入qrcodejs2包，可以在main中进行定义

import QRCode from 'qrcodejs2';

Vue.prototype.$QRCode = QRCode ;

3、使用QRCode

在需要生成二维码的div

<div id="qrcode" ref="qrcode"></div>

生成二维码

setTimeout（（）=>{
    let qrcode = new QRCode('qrcode', { //这里‘qrcode’是dom对象，也可以是this.$refs.qrcode
        width: 150, //图像宽度
        height: 150, //图像高度
        colorDark : "#000000", //前景色
        colorLight : "#ffffff", //背景色
        typeNumber:4, 
        correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
    })

}）

二、打印二维码

（原文链接：https://www.cnblogs.com/ss977/p/10120651.html）

vue项目中批量打印二维码

        </h1>
        <div class="clear"></div>
        <div class="postBody">

前提：项目中要打印的二维码为后台返回，批量选择后，点击打印，先打开二维码预览界面，再执行打印。

以下代码中 codePicList为选中的二维码数组。
重点css:page-break-after:always 在元素后插入分页符;
在打印时，要分页（需求是每个二维码打印在一张纸上）

// 此代码为浏览界面遍历出来的要打印的多个二维码
<ul id="codeImgviewer" v-if="codePicList != null && codePicList.length != 0">
            <li v-for="(item,index) in codePicList" v-bind:key="index" style="cursor:pointer;
  padding:10px;float:left">
              <div :id="'codeimg' + index" style="page-break-after:always;">
                <img :src="item" style="width:260px;height:130px;" @click="showBigImg('codeImgviewer')" />
              </div>
            </li>
          </ul>

 //打印二维码
    printCode() {
      if (this.codePicList == null || this.codePicList.length == 0) {
        return;
      }
      var newWin = window.open(""); //新打开一个空窗口
      for (var i = 0; i < this.codePicList.length; i++) {
        var imageToPrint = document.getElementById("codeimg" + i); //将要被打印的图片
        newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
      }
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function() {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);
    },