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

devtools/2024/12/22 7:01:30/

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 }); // 添加视频文件到zipcache[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文件到zipresolve(); // 没有异步操作,所以直接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.ppmy.cn/devtools/144300.html

相关文章

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎,随着智能驾驶时代的到来,应用也会越来越广泛,关于mapbox-gl和其他地理引擎的详细对比(比如CesiumJS),后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…

前端滚动锚点(点击后页面滚动到指定位置)

三个常用方案: 1.scrollintoView 把调用该方法的元素滚动到屏幕的指定位置,中间,底部,或者顶部 优点:方便,只需要获取元素然后调用 缺点:不好精确控制,只能让元素指定滚动到中间&…

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书 一、下载影刀: https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…

分布式数据存储基础与HDFS操作实践

本篇博客由作者女朋友亲情赞助,本人所撰写内容见资源文件。 1. 虚拟机集群的安装与配置 1.1 创建并配置两个虚拟机 配置网络,让主机和所有部署的虚拟机处于同一个网段下,主机可以去连虚拟机,虚拟机可以去连主机,虚拟机…

如何让cursor给出更好,更准确的回答的两个配置

通过配置,可以让cursor更好,更准确的回答我们的问题,那这两个配置就要一定打开 1. codebase indexing 配置要打开并且同步 codebase indexing 会对我们的代码进行索引和采集,并且根据代码的上下文进行排序。然后进行推理思考&am…

Java项目--仿RabbitMQ的消息队列--统一硬盘操作

目录 一、引言 二、DiskDataCenter类 1.实例化 2.封装交换机操作 3.封装队列操作 4.封装绑定操作 5.封装消息操作 三、总结 一、引言 上一篇文章介绍了如何将消息文件存入硬盘的操作,这一篇文章就简单介绍一下统一硬盘操作。 二、DiskDataCenter类 1.实例化…

Unity3D仿星露谷物语开发6之角色添加动画

1、目的 给角色添加素材中的动画,最终让角色动起来。 2、准备工作 当前的预设体中的Player对象还不够完善,需要删除掉再优化下。此时应当:Hierarchy中的Player对象切断和预设体的关联,同时删除Prefabs中的Player对象。 首先&a…

How to run Flutter on an Embedded Device

basysKom GmbH | How to run Flutter on an Embedded Device https://github.com/sony/flutter-embedded-linux/wiki/Building-Flutter-Engine-from-source flutter源码下载(最新)-CSDN博客 flutter_engine 交叉编译【自定义编译器(最新)】_flutter。engine 修改-CSDN博客 …