HTML5教程

前端生成二维码图片并下载到本地还能这么玩

本文主要是介绍前端生成二维码图片并下载到本地还能这么玩,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

写在前面

最近做的一个小需求,需要给对应的数据生成二维码卡片,同时要求能够批量去生成,并且保存到本地。

于是查阅了网上的资料,用Cavans+QRCode+JSZip+FileSaver可以解决这个问题,小小记录一下。

代码Demo:saver.zip 提取码:stp8

 

进入正题

三七二十一,别的先不管,先引入所需要的的js,因为qrcode.js是依赖jQuery的,所以要先引入jQuery,注意引入顺序,js资源都在上面的demo中

 

在开始生成二维码前,我们先初始化一些数据,这个demo是用jq写的,所以直接通过原生js去生成数据了,略显繁琐,不喜欢的小伙伴可以用vue去写

最终的效果是做出这样一个简单的表格

可以点击生成单个二维码,也可以勾选后批量生成

html:

 1 <button onclick="saveSome()">批量生成</button>
 2 <table border="1px">
 3     <thead>
 4         <tr>
 5             <th><input type="checkbox" id="checkAll" /></th>
 6             <th width="100">名字</th>
 7             <th width="100">操作</th>
 8         </tr>
 9     </thead>
10     <tbody>
11     </tbody>
12 </table>        

js:

 1 var list = [{ //初始化一些数据
 2                 id: 1,
 3                 name: '张三'
 4             },
 5             {
 6                 id: 2,
 7                 name: '李四'
 8             },
 9             {
10                 id: 3,
11                 name: '王五'
12             }
13         ]
14 
15         $(function() {
16             for (var i = 0; i < list.length; i++) {
17                 var html = '<tr><td><input id="item_' + i +
18                     '" name="checkItem" type="checkbox"/>' +
19                     '</td><td>' + list[i].name + '</td><td>' +
20                     '<a onclick="saveOne(' + i + ')">生成二维码</a></td></tr>'
21                 $('tbody').append(html)
22             }
23         })
24 
25         $("#checkAll").bind("click", function() {    //全选或全不选
26             if (this.checked) {
27                 $("[name = checkItem]:checkbox").attr("checked", true);
28             } else {
29                 $("[name = checkItem]:checkbox").attr("checked", false);
30             }
31         });

 

定义一些全局参数,单个或批量下载都能复用的

1 var canvas = document.createElement('canvas'); //创建一个全局画布
2 canvas.width = 300; //设置画布的宽和高
3 canvas.height = 400;
4 var ctx = canvas.getContext('2d'); //画笔

 

公用的绘制代码

 1 function draw(item) { //绘制二维码及名字标识
 2             return new Promise((resolve, reject) => {
 3                 var div = document.createElement('div');
 4                 var qrcode = new QRCode(div, { //绘制二维码
 5                     text: 'index.html?id=' + item.id + Math.random(), //内容加个随机数,可以看出来区别
 6                     width: 250,
 7                     height: 250,
 8                     colorDark: "#000000",
 9                     colorLight: "#ffffff",
10                     correctLevel: QRCode.CorrectLevel.H
11                 });
12                 let mc = div.querySelector('canvas');
13                 ctx.beginPath(); //开始绘制
14                 ctx.fillStyle = '#7ee2f1';
15                 ctx.fillRect(0, 0, 300, 400) //填充底色
16                 ctx.drawImage(mc, 25, 25) //绘制二维码
17                 ctx.font = "bold 45px 微软雅黑";
18                 ctx.textAlign = "center";
19                 ctx.textBaseline = "middle";
20                 ctx.fillStyle = '#000000';
21                 ctx.fillText(item.name, 150, 350) //绘制文字在底部
22                 ctx.closePath(); //结束绘制
23                 resolve();
24             })
25         }

 

1、单个二维码:

1 async function saveOne(i) {
2             let item = list[i];
3             console.log(item)
4             await draw(item);    //绘图需要时间,如果异步完成的话可能会导致保存了一张空白的图,所以使用await等待这个方法完成再往后操作
5             canvas.toBlob(function(blob) { //canvas下载到本地
6                 saveAs(blob, 'img_' + item.id + ".png");
7             });
8         }

 

效果呈现:点击任意的生成二维码按钮,就可以下载图片到本地了

 

上述代码中,主要的两点其实就是生成二维码和保存到本地,其他的绘制只是为了加上标记

(1)生成二维码,参考:生成二维码

(2)使用FileSaver.js保存Canvas到本地,根据官网给出的栗子,直接套就行了

 

2、批量下载二维码

这个其实跟单个二维码下载同理,只不过我们需要把它打包成zip,再下载

初始化一个zip文件

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

 

批量生成

 1 async function saveSome() { //生成多个并打包下载到本地
 2             let my_list = [];
 3             $("[name = checkItem]").each(function() {    //遍历哪个是选中需要生成二维码的
 4                 if($(this).is(':checked'))
 5                     my_list.push(list[$(this).attr('id')]);
 6             });
 7             if(my_list.length==0){
 8                 alert('请选择需要生成二维码的数据')
 9             }else{
10                 for (var i = 0; i < my_list.length; i++) {
11                     let item = my_list[i];
12                     await draw(item);    //等待绘图
13                     await addToZip(canvas,zip,'img_' + item.id + ".png");    //等待加入zip文件
14                 }
15                 createZip()
16             }
17         }

 

将一个canvas加入到zip文件中

1 function addToZip(canvas, zip, name) {
2             return new Promise((resolve, reject) => {
3                 canvas.toBlob(function(blob) {
4                     zip.file(name, blob); // 将每次不同的canvas数据添加到zip文件中
5                     resolve();
6                 });
7             })
8         }

 

下载zip文件到本地的代码

1 async function createZip() {    //下载zip文件到本地
2             zip.generateAsync({
3                 type: 'blob'
4             }).then(function(content) {
5                 saveAs(content, 'demo.zip');
6             });
7         }

 

效果呈现:勾选想要下载出二维码的行,点击批量下载,就可以将二维码打包下载到本地了

 

批量打包下载,这里需要用到刚开始提到的JSZip了

参考官方代码:

1.这一部分是将数据添加进zip文件中

 

2.配合FileSaver.js将zip文件下载到本地

 

 

参考文章:

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

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

 

这篇关于前端生成二维码图片并下载到本地还能这么玩的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!