前端生成二維碼圖片並下載到本地還能這么玩

寫在前面

最近做的一個小需求，需要給對應的數據生成二維碼卡片，同時要求能夠批量去生成，並且保存到本地。

於是查閱了網上的資料，用Cavans+QRCode+JSZip+FileSaver可以解決這個問題，小小記錄一下。

代碼Demo：saver.zip 提取碼：stp8

 

進入正題

三七二十一，別的先不管，先引入所需要的的js，因為qrcode.js是依賴jQuery的，所以要先引入jQuery，注意引入順序，js資源都在上面的demo中

 

在開始生成二維碼前，我們先初始化一些數據，這個demo是用jq寫的，所以直接通過原生js去生成數據了，略顯繁瑣，不喜歡的小伙伴可以用vue去寫

最終的效果是做出這樣一個簡單的表格

可以點擊生成單個二維碼，也可以勾選后批量生成

html：

<button onclick="saveSome()">批量生成</button>
<table border="1px">
    <thead>
        <tr>
            <th><input type="checkbox" id="checkAll" /></th>
            <th width="100">名字</th>
            <th width="100">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>        

js：

var list = [{ //初始化一些數據
                id: 1,
                name: '張三'
            },
            {
                id: 2,
                name: '李四'
            },
            {
                id: 3,
                name: '王五'
            }
        ]

        $(function() {
            for (var i = 0; i < list.length; i++) {
                var html = '<tr><td><input id="item_' + i +
                    '" name="checkItem" type="checkbox"/>' +
                    '</td><td>' + list[i].name + '</td><td>' +
                    '<a onclick="saveOne(' + i + ')">生成二維碼</a></td></tr>'
                $('tbody').append(html)
            }
        })

        $("#checkAll").bind("click", function() {    //全選或全不選
            if (this.checked) {
                $("[name = checkItem]:checkbox").attr("checked", true);
            } else {
                $("[name = checkItem]:checkbox").attr("checked", false);
            }
        });

 

定義一些全局參數，單個或批量下載都能復用的

var canvas = document.createElement('canvas'); //創建一個全局畫布
canvas.width = 300; //設置畫布的寬和高
canvas.height = 400;
var ctx = canvas.getContext('2d'); //畫筆

 

公用的繪制代碼

function draw(item) { //繪制二維碼及名字標識
            return new Promise((resolve, reject) => {
                var div = document.createElement('div');
                var qrcode = new QRCode(div, { //繪制二維碼
                    text: 'index.html?id=' + item.id + Math.random(), //內容加個隨機數，可以看出來區別
                    width: 250,
                    height: 250,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
                let mc = div.querySelector('canvas');
                ctx.beginPath(); //開始繪制
                ctx.fillStyle = '#7ee2f1';
                ctx.fillRect(0, 0, 300, 400) //填充底色
                ctx.drawImage(mc, 25, 25) //繪制二維碼
                ctx.font = "bold 45px 微軟雅黑";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillStyle = '#000000';
                ctx.fillText(item.name, 150, 350) //繪制文字在底部
                ctx.closePath(); //結束繪制
                resolve();
            })
        }

 

1、單個二維碼：

async function saveOne(i) {
            let item = list[i];
            console.log(item)
            await draw(item);    //繪圖需要時間，如果異步完成的話可能會導致保存了一張空白的圖，所以使用await等待這個方法完成再往后操作
            canvas.toBlob(function(blob) { //canvas下載到本地
                saveAs(blob, 'img_' + item.id + ".png");
            });
        }

 

效果呈現：點擊任意的生成二維碼按鈕，就可以下載圖片到本地了

 

上述代碼中，主要的兩點其實就是生成二維碼和保存到本地，其他的繪制只是為了加上標記

（1）生成二維碼，參考：生成二維碼

（2）使用FileSaver.js保存Canvas到本地，根據官網給出的栗子，直接套就行了

 

2、批量下載二維碼

這個其實跟單個二維碼下載同理，只不過我們需要把它打包成zip，再下載

初始化一個zip文件

var zip = new JSZip();    //初始化一個zip文件

 

批量生成

async function saveSome() { //生成多個並打包下載到本地
            let my_list = [];
            $("[name = checkItem]").each(function() {    //遍歷哪個是選中需要生成二維碼的
                if($(this).is(':checked'))
                    my_list.push(list[$(this).attr('id')]);
            });
            if(my_list.length==0){
                alert('請選擇需要生成二維碼的數據')
            }else{
                for (var i = 0; i < my_list.length; i++) {
                    let item = my_list[i];
                    await draw(item);    //等待繪圖
                    await addToZip(canvas,zip,'img_' + item.id + ".png");    //等待加入zip文件
                }
                createZip()
            }
        }

 

將一個canvas加入到zip文件中

function addToZip(canvas, zip, name) {
            return new Promise((resolve, reject) => {
                canvas.toBlob(function(blob) {
                    zip.file(name, blob); // 將每次不同的canvas數據添加到zip文件中
                    resolve();
                });
            })
        }

 

下載zip文件到本地的代碼

async function createZip() {    //下載zip文件到本地
            zip.generateAsync({
                type: 'blob'
            }).then(function(content) {
                saveAs(content, 'demo.zip');
            });
        }

 

效果呈現：勾選想要下載出二維碼的行，點擊批量下載，就可以將二維碼打包下載到本地了

 

批量打包下載，這里需要用到剛開始提到的JSZip了

參考官方代碼：

1.這一部分是將數據添加進zip文件中

 

2.配合FileSaver.js將zip文件下載到本地

 

 

參考文章：

https://stuk.github.io/jszip/

https://github.com/eligrey/FileSaver.js