图片导出

前言

将图片以多级目录的形式导出。

实现

从服务端获取到图片数据后,对数据进行处理。得到下面格式:

js 复制代码
<div @click="exportImage">导出</div>

function exportImage() {
   //从服务端获取图片
  ProjectService.projectBasicInformationByProjectId('2ddQ5JcXNcX').then((res) => {
    let list = res.fileList;
    let opts = {
      zipName: '照片',
      subDirectory: [
        {
          fileName: '种植规划',
          pics: [
            {
              url: list[0].url,
              name: '种植规划1.jpg'
            },
            {
              url: list[1].url,
              name: '种植规划2.jpg'
            },
          ]
        },
      ]
    }
    exportImagesByZip(opts)
  });

}
js 复制代码
import JSZip from "jszip";
import { saveAs } from 'file-saver';
import { useMessage } from "naive-ui";
import { buildUrl } from "~/src/config";

export async function exportImagesByZip(opts) {
  const message = useMessage();
  let { subDirectory, zipName } = Object.assign({
    subDirectory: [],
    zipName: '照片',
  }, opts)
  if (subDirectory.length == 0) {
    message.warning('暂无数据')
    return;
  }
  const promises = [];
  const zip = new JSZip();
  //创建一级目录的压缩包
  const folder = zip.folder(`${zipName}`);
  //创建下级目录
  await subDirectory.forEach(item => {
    let subFolder = folder.folder(`${item.fileName}`);
    //生成镇下的文件
    if (item.pics.length == 0) return;
    item.pics.forEach(item => {
    const promise = new Promise(async (resolver, reject) => {
      let blob = await getImgBlobByUrl(buildUrl(item.url))
      subFolder.file(item.name, blob);
      resolver();
    })
    promises.push(promise);
    })
  })
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then(function (content) {
      saveAs(content, `${zipName}.zip`); // 下载压缩包
    });
  })
}

async function getImgBlobByUrl(url) {
  try {
    const response = await fetch(url);
    console.log(response);
     // 使用fetch请求图片
    const blob = await response.blob(); // 将响应转换为Blob对象
    return blob;
  } catch (error) {
    console.error('图片转换为Blob失败', error);
  }
}
相关推荐
IT_陈寒1 小时前
SpringBoot 3.2 踩坑实录:这5个‘自动配置’的坑,让我加班到凌晨三点!
前端·人工智能·后端
OEC小胖胖1 小时前
代码质量保障:使用Jest和React Testing Library进行单元测试
前端·react.js·单元测试·前端框架·web
獨孤殤1 小时前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue
柯南二号6 小时前
【大前端】Vue 和 React 主要区别
前端·vue.js·react.js
D11_6 小时前
【React】Redux
前端·javascript·react.js
dreams_dream6 小时前
vue2滑块验证
前端·javascript·css
浮生若茶80888 小时前
Flutter环境搭建全攻略之-windows环境搭建
前端·vscode·flutter
小光学长9 小时前
基于vue驾校管理系统的设计与实现5hl93(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
!win !9 小时前
我的后台管理项目报Error: spawn …esbuild.exe ENOENT了
前端·爬坑
wow_DG9 小时前
【前端面试题✨】Vue篇(一)
前端·javascript·vue.js