u

code/container-ocr/ocr-vue/src/views/index.vue

@@ -1,49 +1,30 @@
 <script setup lang="js">
-const value = ref("");
+import { saveAs } from "file-saver";
+import JSZip from "jszip";
 
-const options = [
-  {
-    value: "Option1",
-    label: "Option1",
-  },
-  {
-    value: "Option2",
-    label: "Option2",
-  },
-  {
-    value: "Option3",
-    label: "Option3",
-  },
-  {
-    value: "Option4",
-    label: "Option4",
-  },
-  {
-    value: "Option5",
-    label: "Option5",
-  },
+// 假设这些是文件数据和它们的路径
+const files = [
+  { name: "file1.txt", folder: "folder1", content: "This is file 1 content" },
+  { name: "file2.txt", folder: "folder2", content: "This is file 2 content" },
+  { name: "file3.txt", folder: "folder1", content: "This is file 3 content" },
+  { name: "file4.txt", folder: "folder3", content: "This is file 4 content" },
 ];
+
+async function createZip() {
+  const zip = new JSZip();
+
+  // 遍历文件列表，将文件按文件夹添加到 ZIP 文件中
+  files.forEach((file) => {
+    // 创建文件夹并将文件添加到对应的文件夹下
+    zip.folder(file.folder).file(file.name, file.content);
+  });
+
+  // 生成并下载 ZIP 文件
+  const content = await zip.generateAsync({ type: "blob" });
+  saveAs(content, "files.zip");
+}
 </script>
 
 <template>
-  <G3Grid direction="row">
-    <G3GridGroup :label-width="80" :width="440" :column="2">
-      <G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
-        <el-input type="textarea" v-model="value" />
-      </G3GridItem>
-
-      <G3GridItem label="3" :span="1">
-        <el-input />
-      </G3GridItem>
-    </G3GridGroup>
-    <G3GridGroup :label-width="80" :width="440" :column="2">
-      <G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
-        <el-input type="textarea" v-model="value" />
-      </G3GridItem>
-
-      <G3GridItem label="3" :span="1">
-        <el-input />
-      </G3GridItem>
-    </G3GridGroup>
-  </G3Grid>
+  <el-button @click="createZip">测试</el-button>
 </template>