首页 > 其他分享 >前端使用 jszip.js 和 FileSaver.js 下载并压缩文件

前端使用 jszip.js 和 FileSaver.js 下载并压缩文件

时间:2024-11-08 10:51:23浏览次数:4  
标签:const zip FileSaver cdn js 压缩文件 jszip

  async export_data() {
   let zip = new JSZip()
   // 下载文件并添加到 ZIP
   for (const i of this.tableData) {
     const data = await fetch(i.path).then(response => response.arrayBuffer())
     const imageByteStream = new Uint8Array(data).subarray(1024)
     // 获取图片信息
     const blob = new Blob([imageByteStream], { type: 'image/jpeg' })
     zip.file(`${i.name}.jpg`,blob)
   }
   let content = await zip.generateAsync({ type: 'blob' })
   saveAs(content,`近30天_图片数据.zip`)
  }

ps: i.path是 文件路径

jszip.js cdn地址:https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.min.js
FileSaver.js cdn地址:https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js

标签:const,zip,FileSaver,cdn,js,压缩文件,jszip
From: https://www.cnblogs.com/lyt520/p/18534626

相关文章

  • 带你用HTML+CSS+JS实现动态滚动骰子投掷效果!
    今天带大家用HTML+CSS+JS实现动态骰子投掷效果,下面来看看实现的效果:点击开始投掷,骰子开始滚动。点击停止投掷,骰子面会随机定在一个点数 那么如何实现呢?请听我细细讲解:一、骰子面的样式与布局1、样式:1、其中每一面大量的运用了flex布局来实现了骰面上圆点的位置。2......
  • PHP与Vue.js结合,开发现代Web应用的前后端分离
    随着前端技术的迅猛发展,前后端分离已成为现代Web应用开发的重要趋势。在这个架构中,PHP作为后端语言,配合Vue.js这样的前端框架,可以有效提高开发效率和用户体验。PHP与Vue.js的结合,使得开发者能够专注于各自领域的专业技术,形成高效、灵活的开发模式。PHP作为一种成熟的后端开发语言......
  • DevExpress JS & ASP.NET Core v24.1亮点 - 支持DateOnly/TimeOnly类型
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • 基于springboot+vue.js+uniapp小程序的计算机学习系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的it职业生涯规划系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的疫情网课管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的湖南交通工程学院学生就业信息系统附带文章源码
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 关于JS中的原型
    1.每个函数都会创建一个prototype属性,这个属性指向一个对象,包含应该由特定引用类型的实例共享的属性和方法。(只要三个函数,就比如会附带出现一块对象储存区,链接名为prototype,一定要记住这一点。也就是说,函数,除了arguments等独特的属性,还有一个prototype。对象通过constructor属性指......
  • 移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Native + Vu
    书:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包括选择器、盒......
  • JSP
    JSP和普通HTML页面的区别,我们发现它的语法和普通HTML页面几乎一致,我们可以直接在JSP中编写Java代码,并在页面加载的时候执行,我们随便找个地方插入:<%System.out.println("JSP页面被加载");%>我们发现,请求一次页面,页面就会加载一次,并执行我们填写的Java代码。也就是说,我们可以直......