数据多了就很卡 pass掉 还是找后端吧
只提供npm包的插件 可以看看 数据量小前端下载也可以
主要是下载图片
下载方式
npm install jszip
npm install file-saver
这里下载的min.js使用的
主要
1创建二维码
2将TEST_AAA通过canvas添加到二维码上 再返回图片
3-1 resultBase64Image 生成的结果二维码 可以用于展示
3-2 resultBlobFile 生成的二维码blob文件 用于压缩包下载
3-3 multipleDownload 下载压缩包 格式 [{name,type:‘png’,blobFile}]
3-3-1 last: true // 最后一层不需要创建文件时
3-4 onceDownload 下载一张图片 直接下载的png图
3-5 urlChangeImage 转二维码方法
3-6 imageChangeCanvas 添加文本的二维码方法返回图片
3-7 canvasChangeBlob base64转blob
const zip = new JSZip()
zip的folder 创建文件夹
const fold = zip.folder(zipName)
file 像当前folder里添加blob文件
fold.file(${data.name}.${data.type}
, data.blobFile, { base64: true })
zip.generateAsync 生成压缩包
generateAsync({ type: ‘blob’, compression: ‘DEFLATE’, compressionOptions: { level: 9 } }).then(async content => {
saveAs FileSaver内部下载zip方法
saveAs(content, zipName)
模块: FileSaver.saveAs (content,zipName)
})
<script src="./jszip.min.js"></script>
<script src="./FileSaver.min.js"></script>
<script src="./qrCode.js"></script>
<script>
const upload = async () => {
const {
resultBase64Image,
resultBlobFile,
multipleDownload,
onceDownload, } = await erCodeCallback("https://www.baidu.com", 'TEST_AAA')
const result = resultBlobFile
multipleDownload([
{
name: 'test1',
blobFile: result,
type: 'png',
children: [
{
name: 'child1',
blobFile: result,
type: 'png',
last: true,
children: [
{
name: 'ren1',
blobFile: result,
type: 'png'
}, {
name: 'ren2',
blobFile: result,
type: 'png'
}
]
},
{
name: 'child2',
blobFile: result,
type: 'png'
},
]
},
{
name: 'test2',
last: true,
children: [
{
name: 'child3',
blobFile: result,
type: 'png'
}, {
name: 'child4',
blobFile: result,
type: 'png'
},
]
}],
'zipName'
)
}
// 主要代码
const erCodeCallback = async (erCodeUrl, ctxText) => {
// 创建二维码
function urlChangeImage(url, options) {
if ([undefined, null].includes(url)) {
throw '二维码地址为空'
}
const newElement = document.createElement('div')
newElement.className = 'newErCodeElement'
// document.styleSheets[0].insertRule(
// '.newErCodeElement{display:inline-block',
// document.styleSheets[0].cssRules.length,
// )
const qrCode = new QRCode(newElement, {
text: url,
width: 300,
height: 300,
...options
});
const canvas = newElement.childNodes[0]
return canvas.toDataURL()
}
// 将qrCode返回的图片传入
function imageChangeCanvas(text, url) {
if ([undefined, null].includes(url)) {
throw '二维码base64图片url为空'
}
return new Promise((resolve, reject) => {
let result = ''
const canvas = document.createElement('canvas')
const w = 300, h = 300
canvas.setAttribute('width', w)
canvas.setAttribute('height', h)
canvas.style.background = '#fff'
const ctx = canvas.getContext('2d')
let img = new Image();
img.src = url;
img.onload = function () {
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, w, h)
ctx.drawImage(img, 10, 10, w - 20, h - 20)
ctx.fillStyle = '#fff';
ctx.fillRect(45, h / 2 - (40 / 2), w - (45 * 2), 40)
ctx.fillStyle = 'rgb(89, 96, 246)';
ctx.font = '30px Arial'
ctx.textBaseline = 'middle'
ctx.textAlign = 'center'
ctx.fillText(text, w / 2, h / 2);
result = canvas.toDataURL()
resolve(result)
}
})
}
// 递归创建文件夹和添加图片
function recursionCreateFold(list, zip) {
const addFold = (data, workFold) => {
if (data.blobFile && data.type) {
workFold.file(`${data.name}.${data.type}`, data.blobFile, { base64: true })
}
}
const result = list.map((item) => {
const fold = zip.folder(item.name)
if (item.children) {
if (item.last) {
item.children.forEach((val) => {
addFold(val, fold)
if (val.children) {
recursionCreateFold(item.children, fold)
}
})
} else {
recursionCreateFold(item.children, fold)
}
}
addFold(item, fold)
return fold
})
return result
}
// 多个下载图片压缩包 {name,file,type}
function multipleDownload(fileList, zipName) {
if (!fileList || fileList.length < 1 || !Array.isArray(fileList)) {
throw `没有可下载项,fileList:格式${JSON.stringify([{ name: 'name', blobFile: 'blobFile', type: 'png' }])}`
}
if (!zipName || typeof zipName !== 'string') {
throw '请输入zip名称'
}
const zip = new JSZip()
const fold = zip.folder(zipName)
recursionCreateFold(fileList, fold)
zip
.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 9 } })
.then(async content => {
saveAs(content, zipName)
})
}
// 一个下载图片
function onceDownload(url, name) {
if (!url || url.length < 1 || typeof url !== 'string') {
throw 'url参数错误'
}
if (!name || typeof name !== 'string') {
throw '请输入zip名称'
}
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = url
tempLink.setAttribute('download', name)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click() // 启动下载
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(url)
}
// 转blob
function canvasChangeBlob(data) {
const arr = data.split(',')
const dataType = arr[0].match(/:(.*?);/)[1]
const dataContent = window.atob(arr[1])
let i = dataContent.length
const u8arr = new Uint8Array(i)
while (i--) {
u8arr[i] = dataContent.charCodeAt(i)
}
const newBlobValue = new Blob([u8arr], { type: dataType })
return newBlobValue
}
const base64Img = await urlChangeImage(erCodeUrl)
const resultBase64Image = await imageChangeCanvas(ctxText, base64Img)
const resultBlobFile = canvasChangeBlob(resultBase64Image)
return {
multipleDownload,
onceDownload,
resultBase64Image,
resultBlobFile,
urlChangeImage,
imageChangeCanvas,
canvasChangeBlob
}
}
// 0 const {resultBase64Image,resultBlobFile,multipleDownload,onceDownload } = await erCodeCallback("https://www.baidu.com", 'SHA037_T1')
// 1 获取列表 循环 执行erCodeDownload('https://www.baidu.com', 'SHA037_T1') 转换为二维码图片 resultBase64Image
// 2 点击单图片 aDownLoad(img.src,name)
// 3 一键下载 获取全部列表文件 需要有type和blobFile参数才会添加图片
/**
* multipleDownload([
{
name: 'test1',
blobFile: result,
type: 'png',
children: [
{
name: 'child1',
blobFile: result,
type: 'png',
last:true, // 最后一层不需要创建文件时
children: [
{
name: 'ren1',
blobFile: result,
type: 'png'
}, {
name: 'ren2',
blobFile: result,
type: 'png'
}
]
},
{
name: 'child2',
blobFile: result,
type: 'png'
},
]
},
{
name: 'test2',
last:true,
children: [
{
name: 'child3',
blobFile: result,
type: 'png'
}, {
name: 'child4',
blobFile: result,
type: 'png'
},
]
}],
'zipName'
)
*/
</script>