首页 > 其他分享 >vue3 之 多张图片压缩下载

vue3 之 多张图片压缩下载

时间:2024-08-19 17:30:04浏览次数:10  
标签:sort 文件 const ZIP 压缩 item blob vue3 下载

一、涉及的插件

  ① JSZip:jszip是一个用于创建、读取和编辑.zip文件的JavaScript库

  ② FileSaver:FileSaver 是一个用于在客户端保存文件的 JavaScript 库。它提供了一种简单的方式来将数据保存为本地文件,通常用于在浏览器中将动态生成的内容(如图像、文档、压缩文件等)保存到用户的计算机上。FileSaver 可以将 Blob 或 File 对象保存为本地文件,支持设置文件名和文件类型,非常适合用于下载动态生成的文件。

二、下载插件

  ① npm install jszip

  ② npm install file-saver --save

三、涉及的方法

  ① JSZip常用的方法

    1)file(name, data, options):向 ZIP 文件中添加一个文件,并指定文件名、文件内容和可选的选项。
    2)loadAsync(data):从给定的二进制数据中加载一个 ZIP 文件。
    3)loadAsync(url, options):从指定 URL 处加载一个 ZIP 文件。
    4)folder(name):创建一个文件夹,用于组织文件。
    5)generateAsync(options, onUpdate):生成 ZIP 文件,并返回一个 Promise 对象。
    6)remove(name):从 ZIP 文件中移除指定的文件或文件夹。
    7)file(name, content, options):向 ZIP 文件中添加一个文件。

  ② file-saver的方法

    saveAs : 使用saveAs方法将Blob对象保存在本地计算机中。例如:‘saveAs(blob,'文件名')’

四、主要功能代码

const handleDownSamples = async () => {
  const zip = new JSZip();
  //   获取需要下载的数据
  const currentLocalStorageOne =
    activeTab.value === '1'
      ? JSON.parse(localStorage.getItem('sampleSelectionSelected') || '[]')
      : JSON.parse(localStorage.getItem('finalPieceSelected') || '[]');

  // 根据 item.albumId 进行从小到大排序
  currentLocalStorageOne.sort((a: any, b: any) => a.sort - b.sort);

  await Promise.all(
    currentLocalStorageOne.map(async (item: any) => {
      const res = await fetch(item.albumImage, { mode: 'cors' });
      const blob = await res.blob();
      const fileName = `${item.sort >= 10 ? item.sort : `0${item.sort}`}.png`;
      //  将Blob数据添加到ZIP文件中
      zip.file(fileName, blob, { binary: true });
    })
  );

  const timestamp = dayjs().format('YYYYMMDDHHmmss');
  //  文件名
  const filename = `${activeTab.value === '1' ? '选片样图' : '最终成片'
    }${timestamp}.zip`;

  zip.generateAsync({ type: 'blob' }).then((content: any) => {
    //  将Blob数据保存为指定的文件名
    FileSaver.saveAs(content, filename);
  });
};

  

     注:该文档为个人理解所写,有误可建议修改

标签:sort,文件,const,ZIP,压缩,item,blob,vue3,下载
From: https://www.cnblogs.com/persistIn/p/18367690

相关文章

  • 解决Vue3+Ts打包项目时会生成很多的map文件
     正常打包会生成.js和.map文件怎么去解决它呢?正常来说我们会在vite.config.ts配置我们的项目打包方式,如下:(我这里的target:es2022是为了支持模块中顶层await的使用)//Vite配置文件exportdefault{build:{//指定构建输出目录outDir:"dist",//使用"......
  • MAC苹果电脑JDK下载安装教程
    JDKForMac 在Mac上安装JDK的步骤主要包括下载JDK安装包、‌安装JDK、‌查询JDK安装路径、‌配置JavaJDK环境变量以及使配置生效。‌以下是详细的步骤说明:‌下载JDK安装包访问Oracle官网,‌选择适合MacOS版本的JDK安装包进行下载。‌对于M系列芯片,‌选择Arm64DMGinsta......
  • AMD Xilinx MPSoC 在分别下载 PL bit文件、PS软件的情况下,PS软件如何访问 PL AXI寄存
    在调试模式下,可以通过JTAG下载MPSoCPL的bit文件,再下载MPSoCPS的软件。这时候,PL已经下载,PS软件应该能够访问PL实现的AXI寄存器。但是PS的软件会卡住。如果使用同样的软件和bit文件,做成boot.bin,在QSPI/SD启动模式下,又一切正常。或者boot.bin里只有PS的软件,启动过程中通过Vivado加......
  • RTL9220固件分享,RTL9220硬盘盒固件升级工具下载
    RTL9220是瑞昱半导体(Realtek)推出的88针脚10mm×10mmQFN封装的单芯片,内建ARGB控制器,提供USB3.2Gen2×2(20Gbps)接口,支持双口PCIe3.0×4lanesNVMe1.3或SATAGen3(6Gbps)固态硬盘。在USB转SATA模式下,RTL9220支持SATAGen3规格,为每个端口提供6Gbps的带宽且具有与SATAGen2/Gen1......
  • [GUET-CTF2019]虚假的压缩包1附送RSA解密&CRC破解png宽高&异或python脚本
    解压得到下图两个zip文件,虚假的压缩包、真实的压缩包使用010editor打开,发现是伪加密,把09改为00即可打开打开以后,发现是是一个rsa解密题上python脚本importgmpy2deffind_pq(n):forpinrange(2,int(n**0.5)+1):ifn%p==0:q=......
  • cdrx4专业版汉化免费安装包下载2024最新
    最近,我终于用上了CorelDRAWX4!这款软件的最新版本真的让我大开眼界,它不仅拥有强大的绘图和设计功能,还加入了一些让人惊喜的新特性。我要说的是,CorelDRAWX4的界面更加简洁明了了。所有的工具和菜单都被重新组织,使得用户能够更快速地找到所需的功能。而且,它还新增了一些实用的......
  • cdr软件X4破解版本安装包下载2024最新
    “coreldrawx4”的更新,让设计师们再次燃起了对这款软件的期待与好奇。作为一款专业的矢量图形绘制软件,它不仅拥有强大的绘图工具和丰富的特效资源,还提供了便捷的操作界面和高效的工作流程,是设计师们不可或缺的得力助手。在新版本中,“coreldrawx4”带来了多项令人惊喜的新功能......
  • vue3+watch
    watch—vue3是一个惰性,所谓惰性,就是被动的去进行调用,而不是主动的去进行触发,可以通过使用immediate来等进行立即执行调用如何在初始阶段进行触发呢?了解到watch中的参数watch(参数一:监听的数据,参数二:回调函数()=>{编辑代码},参数三:option?用于执行一些配置选项)参数一:是在se......
  • 【Vue3】准备工作
    系列文章目录第一章准备工作文章目录系列文章目录第一节:Node安装一、nvm二、node:三、npm第二节:VSCode一、下载地址二、概念讲解三、插件安装第三节:VSCode快捷键通用快捷键基础编辑导航查询与替换多行光标操作与选择丰富的语言操作编辑器管理文件管理显示集成终端......
  • Vue3+Axios
    使用Vue3和Axios实现CRUD操作在当今的前端开发中,Vue.js作为一款流行的JavaScript框架,正在被越来越多的开发者所青睐。尤其是Vue3引入了CompositionAPI和更优雅的响应式处理,使得模板编写和状态管理变得更加直观。在这篇博客中,我将带领大家通过一个简单的示例,使用......