前端插件QRCode.js生成二維碼

基本使用

插件安裝

cnpm install qrcodejs2 --save
// 或者
npm install qrcodejs2 --save

插件導入

使用commonjs或者es6模塊方式

import QRCode from 'qrcodejs2';
// 或者
let QRCode = require('qrcodejs2');

頁面容器

頁面增加一個容器標籤

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

實例化

 creatQrCode() {
      let text = '二維碼內容';
      let qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //二維碼內容字元串
        width: 128, //圖像寬度
        height: 128, //圖像高度
        colorDark: '#000000', //二維碼前景色
        colorLight: '#ffffff', //二維碼背景色
        correctLevel: QRCode.CorrectLevel.H, //容錯級別
      })
}

問題處理

1、清除已經生成的二維碼

方案一：this.$refs.qrcode.innerHTML = ''; 

方案二： qrcode.clear(); // 清除二維碼方法二

2、動態替換二維碼的內容

let string='新的內容'

qrcode.makeCode(string)

3、報錯提醒 Error: code length overflow ？

這是因為url太長，導致二維碼載入報錯，可以調低容錯率來處理。

修改參數：correctLevel: QRCode.CorrectLevel.H ，容錯級別，由低到高分別為L M Q H

4、字元串較長，二維碼顯示模糊怎麼辦？

可以嘗試先將生成的二維碼倍數擴大，然後在css上面固定顯示寬高，這樣可以擴大顯示像素精度

.qrcode-wrap{
	width: 128px;
	height: 128px;
}
.qrcode-wrap canvas,
.qrcode-wrap img {
	width:100%;
	height:100%;
}

 <div id="qrcode" ref="qrcode" class="qrcode-wrap"></div>
 
 creatQrCode() {
      let text = '二維碼內容';
      let qrcode = new QRCode(this.$refs.qrcode, {
        text: text, 
        width: 128 * 3, //寬擴大3倍
        height: 128 * 3, //高擴大3倍
        colorDark: '#000000', 
        colorLight: '#ffffff', 
        correctLevel: QRCode.CorrectLevel.H, 
      })
}

5、二維碼想要帶白邊怎麼辦？

插件默認生成的圖片是沒有邊框的

如果只想在頁面顯示上有邊框

方案一：直接給容器上面加樣式，利用padding的特性，擠出白邊

.qrcode-border{
        display: flex;
        width: 128px;
        height: 128px;
        box-sizing: border-box;
        padding: 10px;/*利用padding*/
        border: 1px solid rgb(204, 204, 204);
    }

<div id="qrcode" ref="qrcode" class="qrcode-border"></div>

方案二：給容器加一個帶邊框樣式的父級容器

 .qrcode-container{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        border: 1px solid #cccccc;
    }

<div class="qrcode-container">
        <div id="qrcode" ref="qrcode"></div>
 </div>

效果展示

✅PS：如果只想【列印】的白邊邊框，這兩種方案也可以

QRCode.js 文檔：
http://code.ciaoca.com/javascript/qrcode/
npm package 地址：
https://www.npmjs.com/package/qrcodejs2
github 地址：
https://github.com/davidshimjs/qrcodejs

如果想要頁面和下載的二維碼都帶白邊邊框

可以結合插件html2canvas來實現（如有其它方案，歡迎分享）

html2canvas 是一款利用javascript進行屏幕截圖的插件

//安裝
cnpm install --save html2canvas

//引入
import html2canvas from "html2canvas";

主要思路：

• 先使用QRCode生成二維碼圖片
• 然後使用html2canvas把帶樣式的二維碼生成新的圖片
• 隱藏QRCode生成的二維碼圖片

<div  ref="canvas" class="canvas-box" :style="{display:(originImg===true?'none':'flex')}">
    <div  class="qrcode-box">
        <div ref="qrcode" class="qrcode-img"></div>
    </div>
    <div class="qrcode-text">
        掃一掃
    </div>
</div>

<img :src="imgUrl">

最終效果

html2canvas 文檔地址：
http://html2canvas.hertzen.com/documentation

github 地址：
https://github.com/niklasvh/html2canvas

前端插件JsBarcode生成條形碼

安裝和引入

//安裝
cnpm install jsbarcode --save

//引入
import JsBarcode from 'jsbarcode'

頁面容器

<template>
  <!-- 條形碼容器，可選svg、canvas，或img標籤 -->
  <svg id="barcode"></svg>
  <!-- or -->
  <canvas id="barcode"></canvas>
  <!-- or -->
  <img id="barcode"/>
</template

實例化

不要在DOM還未載入時，調用jsbarcode庫，比如create生命周期

簡版

 JsBarcode('#barcode', 12345678,
       {
         displayValue: true // 是否在條形碼下方顯示文字
       }
     )

複雜版

 // 生成條形碼
  JsBarcode('#barcode', '12345678', {
      format: "CODE39",//選擇要使用的條形碼類型
      width:3,//設置條之間的寬度
      height:100,//高度
      displayValue:true,//是否在條形碼下方顯示文字
      text:"Axjy",//覆蓋顯示的文本
      fontOptions:"bold italic",//使文字加粗體或變斜體
      font:"fantasy",//設置文本的字體
      textAlign:"right",//設置文本的水平對齊方式
      textPosition:"top",//設置文本的垂直位置
      textMargin:5,//設置條形碼和文本之間的間距
      fontSize:15,//設置文本的大小
      background:"#eee",//設置條形碼的背景
      lineColor:"#FF7F50",//設置條和文本的顏色。
      margin:15//設置條形碼周圍的空白邊距
    })

GitHub 地址

文檔地址

條碼生成器

擴展

常用條形碼類型組成及說明

說明	圖示
CODEBAR條碼 這是一個自檢碼，沒有校驗位;用照片實驗室，圖書 館，內容僅支持0~9、+ – / $ . : 等6個特殊符號
Code11條碼 只允許11種字元，分別是0-9和”-“,為降低檢查錯誤率， 可使用兩位的檢驗碼。
Code39條碼字符集包括數字 、大寫字母以及- . $ / + %等字元,通常 運用於資產管理、會員卡、店內碼管理、產品卷標
Code 39 Extended 這是一個擴展版本，支持完整的ASCII字符集的 Code39條碼。如果有一個要求使用Code39條碼以外的數字和大寫 字母字元，然後這是推薦的條碼。這是基於Code39條形碼，這也是非常簡單和容易使用
Code93條碼 是 full ASCII 模式，可使用ASCII全部128個字元。
Code128A 字符集 包括大寫字母、數字、常用標點符號和一些控制符。
Code128B字符集 包括大小寫字母、數字、常用標點符號。
Code128C字符集 為純數字序列。
Code128Auto 是將上述三種字符集最佳優化組合。

說明	圖示
EAN13商品條碼 是純數字，而且位數是12位，最後一位為校驗碼， 組成13位數字。主要用於各種商品零售行業包裝印刷。
EAN8商品條碼 是純數字，而且位數是7位，最後一位為校驗碼， 組成8位數字。主要用於各種商品零售行業包裝印刷。
GS1-128 (EAN-128) 是由UPC/EAN指定代表意義規則的128碼， 編碼方式同code128條碼。
ISBN條碼：ISBN是「國際標準書號」類型是基於EAN-13,主要用於 出版物書籍類產品。
交叉25碼（Interleaved 2 of 5），常用於物流管理，字符集僅為數字 且個數為偶數,為奇數將自動在前面加”0″。
MSI條形碼 必須是純的數字0-9，帶有一位檢驗碼。主要使用在圖書館 和零售應用中。在MSI字體中，使用圓括弧來表示開始和結束字元。
UPC-A條碼 商品條碼是純數字，而且位數是11位，在編碼過後外 加一位校驗碼，組成12位數字,主要在美國和加拿大使用。
UPC-E條碼 商品條碼是純數字，是由UPC-A縮減而成，位數是7位， 而且首位必須為0，在編碼過後外加一位校驗碼，組成8位數字。

說明	圖示
UPC E 2 Digits 特性同 UPC-A，後面附加之2碼條形碼通常使用於價格用途。
UPC-E 5 digits 特性同 UPC-A，後面附加之5碼條形碼通常使用於價格用途
POSTNET (郵政數字編碼技術)條形碼用來對美國郵件代碼進行編碼,由5位或9位或11位數字組成
Intelligent Mail 這是「智能郵件」是指美國郵政為國內郵遞服務提供的服務條碼，你可以提供 5位數字（郵政編碼） 9位數字（郵政編碼+ 4代碼） 11位數字（郵政編碼+ 4代碼+ 2位數字）

結語

以上主要只寫了Vue版的示例，但是兩個插件都是使用原生JavaScript寫成，不依賴任何庫/框架，所以不論是Jquery還是React都可以用