Vue-前端下载zip(图片)

仟白

已于 2024-01-10 19:22:50 修改

阅读量550

点赞数

分类专栏： javascript 文章标签：前端数学建模 javascript

于 2023-05-31 15:28:17 首次发布

本文链接：https://blog.csdn.net/weixin_52594202/article/details/130969456

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数据多了就很卡 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>