视频及JSON数据的导出并压缩

npm下载安装 jszip 和 file-saver 这两个库来实现文件的压缩和保存功能:

bash 复制代码
npm install jszip 
npm install file-saver

导入依赖库:

javascript 复制代码
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

方法实现:

javascript 复制代码
batchDownload() {
    const zip = new JSZip();
    // 下载后压缩包的名称
    const blogTitle = '检测数据.zip';
    const cache = {};
    const promises = [];
    
    // this.tableData  为数据体数据

    this.tableData.forEach(item => {
        // URL 构建修正
        let url = "https://plat.aiplusfirst.com" + (item.wuImg ? item.wuImg : item.img);

        // 文件名构建
        const folderName = item.id + "-" + item.quadrant + '-' + item.leftRightBreasts + '-' +
                         this.classifyToNumber(item.aiResult) + '-' + this.classifyToNumber(item.allResult) +
                         '-' + item.contFlag + '-' + item.deviceNum;

        const video_name = folderName + '/' + item.id + '.' + item.imgType;
        const json_name = folderName + '/' + item.id + '.json';

        // 获取并存储视频文件
        const videoPromise = this.getFile(url).then(data => {
            zip.file(video_name, data, { binary: true }); // 添加视频文件到zip
            cache[video_name] = data;
        });

        // 处理JSON数据
        const jsonData = JSON.stringify(item.jsonData);
        const jsonBlob = new Blob([jsonData], {type: 'application/json'});

        const jsonPromise = new Promise(resolve => {
            zip.file(json_name, jsonBlob); // 添加JSON文件到zip
            resolve(); // 没有异步操作,所以直接resolve
        });

        // 将两个Promise都推入数组
        promises.push(videoPromise, jsonPromise);
    });

    // 等待所有Promise完成
    Promise.all(promises).then(() => {
        zip.generateAsync({
            type: "blob",
            compression: 'DEFLATE',
            compressionOptions: {
                level: 9 // 压缩等级
            }
        }).then(content => {
            saveAs(content, blogTitle); // 保存压缩包
        });
    }).catch(error => {
        console.error('批量下载失败:', error);
    });
},

getFile(url) {
    return new Promise((resolve, reject) => {
        let xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", url, true);
        xmlHttp.responseType = "blob";
        xmlHttp.onload = function () {
            if (xmlHttp.status === 200) {
                resolve(xmlHttp.response);
            } else {
                reject(xmlHttp.statusText || xmlHttp.responseText);
            }
        };
        xmlHttp.onerror = function () {
            reject(xmlHttp.statusText || xmlHttp.responseText);
        };
        xmlHttp.send();
    });
},
相关推荐
kaixin_啊啊3 天前
突破限制:Melody远程音频管理新体验
音视频
ai产品老杨3 天前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker3 天前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie3 天前
Android音频学习(十八)——混音流程
学习·音视频
清风6666663 天前
基于STM32的APP遥控视频水泵小车设计
stm32·单片机·mongodb·毕业设计·音视频·课程设计
Cary丿Xin3 天前
Luma 视频生成 API 对接说明
音视频
Martin-Luo4 天前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
星尘库4 天前
后端json数据反序列化枚举类型不匹配的错误
json
BXCQ_xuan4 天前
软件工程实践四:MyBatis-Plus 教程(连接、分页、查询)
spring boot·mysql·json·mybatis
王维志4 天前
LiteDB详解
数据库·后端·mongodb·sqlite·c#·json·database