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

视频及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 }); // 添加视频文件到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.lryc.cn/news/506564.html

相关文章:

  • VScode使用教程(菜鸟版)
  • 【漏洞复现】Grafana 安全漏洞(CVE-2024-9264)
  • Android AOSP 源码中批量替换“phone“为“tablet“的命令详解
  • 基于JavaWeb(SSM+MySQL)问卷调查管理系统设计与实现毕业论文
  • 域内用户枚举与密码喷洒与密码爆破
  • DIY 集合求并集(union)运算的代码 ← Python
  • Redis bitmaps 使用
  • vue深层数据响应的问题
  • 解决Nginx + Vue.js (ruoyi-vue) 单页应用(SPA) 404问题的指南
  • 项目计划表如何制作?使用甘特图制作项目计划表的步骤
  • Flutter-底部分享弹窗(showModalBottomSheet)
  • 初学stm32 --- 时钟配置
  • LeetCode:226.翻转二叉树
  • (css)鼠标移入或点击改变背景图片
  • Unbuntu下怎么生成SSL自签证书?
  • OpenGL ES 03 加载3张图片并做混合处理
  • 深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互
  • PyTorch 2.0 中设置默认使用 GPU 的方法
  • 如何在 Ubuntu 22.04 服务器上安装 Jenkins
  • 【一篇搞定配置】如何在Ubuntu上配置单机/伪分布式Hadoop
  • 利用Map集合设计程序,存储城市和对应等级相关信息
  • 【自动驾驶】单目摄像头实现自动驾驶3D目标检测
  • 21 go语言(golang) - gin框架安装及使用(二)
  • Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch(CPU版本)
  • 【Unity3D】实现可视化链式结构数据(节点数据)
  • Three.js推荐-可以和Three.js结合的动画库
  • 增强现实(AR)和虚拟现实(VR)的应用
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • 【Threejs】从零开始(六)--GUI调试开发3D效果
  • Cocos Creator 试玩广告开发