- 生成二维码
- 引用 jquery.qrcode.js ；连接：https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js 、https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.min.js
/**
* 生成二维码
* @param {string} url 二维码url
* @param {string } picName 图片名称
*/
function create_QR(url, picName) {
//jquery.qrcode.js 插件生成二维码
$('#qrcodeid').qrcode({
width: 140,
height: 140,
render: "canvas", //设置渲染方式 table canvas
typeNumber: -1, //计算模式
correctLevel: 0,//纠错等级
background: "#ffffff",//背景颜色
foreground: "#000000",//前景颜色
text: url //链接（http开头的，自动跳状态链内容）或者文字
});
var len = $('#qrcodeid').find("canvas").length;
//给当前生成的canvas 添加data-picname 作为下载后的图片名称（.png类型图片）
$($('#qrcodeid').find("canvas")[len - 1]).data().picname = picName;
}
- 生成压缩包下载
- 引用jszip.js 和 FileSaver.js 连接：https://files.cnblogs.com/files/kitty-blog/jszip.js、https://files.cnblogs.com/files/kitty-blog/jszip.min.js、https://files.cnblogs.com/files/kitty-blog/FileSaver.js
/**下载二维码压缩包 */
function download() {
//创建压缩包对象 jszip.js
var zip = new JSZip();
//获取到所有已经生成好的二维码
var canvases = $("#qrcodeid").find('canvas');
$.each(canvases, function (i, item) {
var imgData = item.toDataURL('image/png').split('base64,')[1];
var picName = $(item).data().picname;
zip.file(picName, imgData, { base64: true });
});
//下载压缩包
zip.generateAsync({ type: "blob" }).then(function (content) {
// see FileSaver.js
saveAs(content, "二维码.zip");
});
//移除掉loading
setTimeout(function () {
$('#downloadLabel').removeClass("whirl standard");
}, 1500);
}
Html:
<div id="qrcodeid" class="hidden qr_area">
</div>
思路：根据用户勾选的数据内容，分别根据数ID 、标题等生成 对应的数据连接 url 、图片名称。
/**
* 点击下载
* @param {string} checkBoxName 复选框的name
*/ function download_data_check(checkBoxName) {
//check 是否选中需要生的二维码
var _checkedAll = $("input[name=" + checkBoxName + "]:checked");
if (_checkedAll.length === 0) {
baseAlert("warning", "请选择需要下载的内容");
return false;
}
//添加loading
$('#downloadLabel').addClass("whirl standard");
//获取到需要的数据信息
$.each(_checkedAll, function (i, item) {
var id = $(item).val();
var title = $(item).data().title;
var author = $(item).data().author;
getQR_info(id, title, author);
});
//开始下载压缩包
download();
}
/**
* 下载二维码
* @param {int} id 数据ID
* @param {string} title 标题
* @param {string} author 作者
*/
function getQR_info(id, title, author) {
//二维码链接
var url = window.location.origin + '/WX/Inscription/Detail/' + id;
//图片名称 png类型
var pic = title + author + '.png';
//生成二维码
create_QR(url, pic);
}