二维码批量下载
二维码容器 隐藏
<div
id="code-box"
ref="qrCodeDiv"
style="position: absolute; left: -1000px; top: -1000px; z-index: -999"
>
<div
v-for="(item, index) in urlList"
:ref="'code' + index"
:id="'code' + index"
:key="index"
></div>
</div>
批量下载二维码—下载插件
import FileSaver from "file-saver";
import JSZip from "jszip";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
标签批量下载勾选–table表格
selectValHandle(val) {
this.urlList = [];
val.forEach((item) => {
this.urlList.push(item.batteryNo); //编号
});
},
批量下载图片
downloadImg() {
// 初始化压缩包
var zip = new JSZip();
var img = zip.folder("images");
// 遍历url生成二维码
let url = "http://192.168.1.73:8080/#/H5_batteryDes" //需要跳转的地址
this.urlList.forEach((item, index, arr) => {
var qrcode = new QRCode("code" + index, {
width: 200, // 设置宽度
height: 200, // 设置高度
colorDark: "#000000",
colorLight: "#ffffff",
text: `${url}?batteryNo=${item}`, //需要跳转的地址--带上编号
});
console.log(qrcode, "qrcode");
// 将生成二维码转换为图片
html2canvas(document.querySelector("#code" + index), {
logging: false,
useCORS: true,
}).then((canvas) => {
var imgUrl = canvas.toDataURL("png");
// 需要对base64进行截取处理,否则无法顺利打包
var regex = /data:image\/.*;base64,/;
imgUrl = imgUrl.replace(regex, "");
// 添加进img
img.file(item + ".png", imgUrl, { base64: true });
this.$nextTick(() => {
// 判断如果为最后一张图片
if (index == arr.length - 1) {
zip.generateAsync({ type: "blob" }).then(function (content) {
// 调用api进行下载
FileSaver.saveAs(content, "二维码.zip");
});
}
});
});
});
},
在h5页面接受参数发请求
created() {
//获取二维码信息-电池编号
let scanCode = location.href.split("=")[1];
this.init(scanCode);
},
h5页面嵌套在web项目
px-rem
rem.js 适配
// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
var clientWidth = document.documentElement.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
// 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
} else {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//手机端
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
} else {
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
}
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}