视频及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();
    });
},
相关推荐
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
王者鳜錸10 小时前
使用Selenium自动化获取抖音创作者平台视频数据
selenium·自动化·音视频
却道天凉_好个秋10 小时前
音视频学习(三十七):pts和dts
音视频·pts·dts
沐尘而生11 小时前
【AI智能体】智能音视频-搭建可视化智能体
数据库·人工智能·ai作画·音视频·娱乐
子时不睡12 小时前
【Datawhale AI 夏令营】 用AI做带货视频评论分析(一)
人工智能·深度学习·音视频
却道天凉_好个秋13 小时前
音视频学习(三十八):像素与位深
音视频·像素·位深
菜包eo13 小时前
教育行业可以采用Html5全链路对视频进行加密?有什么优势?
前端·音视频·html5
k093313 小时前
vue2中使用xgplayer播放流视频
音视频
慢行的骑兵16 小时前
Android音视频探索之旅 | C++层使用OpenGL ES实现视频渲染
android·音视频·ndk
Antonio91518 小时前
【音视频】nginx-hls-多码率测试环境搭建
音视频