当前位置: 首页 > article >正文

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

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

npm install jszip 
npm install file-saver

导入依赖库:

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

方法实现:

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();
    });
},


http://www.kler.cn/a/445246.html

相关文章:

  • 数据库高可用性与容灾
  • 【k8s集群应用】kubeadm1.20(单master)
  • 电脑玩《刺客信条》时中,遇到找不到d3dx9_42.dll的问题是什么原因?缺失d3dx9_42.dll应该怎么解决呢?下面一起来看看吧!
  • 如何用细节提升用户体验?
  • 第33天:安全开发-JavaEE应用SQL预编译Filter过滤器Listener监听器访问控制
  • 配置flutter 解决andriod studio报错 no device selected
  • 揭秘语言模型后训练:指令微调、偏好调优与强化学习的深度解析
  • AdminJS - 现代化的 Node.js 管理面板框架详解
  • 【系统架构设计师】真题论文: 论数据分片技术及其应用(包括解题思路和素材)
  • 在THREEJS中加载3dtile模型
  • Mysql索引类型总结
  • 【华为OD-E卷-开心消消乐 100分(python、java、c++、js、c)】
  • 【软件开发】做出技术决策
  • 2024.2 ACM Explainability for Large Language Models: A Survey
  • 基于springboot的银行账目账户管理系统
  • maven项目运行时NoSuchMethodError问题排查记录(依赖冲突解决)
  • 使用yolo v5 识别月球极小撞击坑
  • 卫星综合电子软件系统
  • docling:PDF解析
  • DALL-M:基于大语言模型的上下文感知临床数据增强方法 ,补充