增加直接读取棉花糖excel

README.md

@@ -68,6 +68,8 @@
 
 将棉花糖图片导出，支持单独导出中文、翻译、合并样式，且合并样式支持
 
+可复制文本于棉花糖图片内导出；也可传入 Excel 文件导出，但请确保 Excel 文件中含有中文和日文两项列标题，将会把对应列内容导出。
+
 ### 禁言列表界面
 
 自动查询房间界面中，所有拥有房管权限的直播间已被禁言用户，可撤销禁言。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-douden-tool",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "author": "濯墨",
   "scripts": {

src/components/Card.vue

@@ -2,9 +2,9 @@
   <section class="card-container">
     <div class="card-body">
       <div class="card-wrap">
-        <div contenteditable="true" class="card-text" />
+        <div contenteditable="true" class="card-text"><slot /></div>
       </div>
-      <div class="card-brand"><slot /></div>
+      <div class="card-brand">{{ tip }}</div>
     </div>
     <div class="card-logo">
       <img src="/candy.png" class="card-image" />
@@ -15,6 +15,7 @@
 <script>
 export default {
   name: "Card",
+  props: { tip: String },
 };
 </script>
 

src/ipc.js

@@ -14,7 +14,8 @@ import {
   RemoveSilentUser,
   GetDynamic,
 } from "./plugins/axios";
-import { writeFile } from "fs/promises";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
 
 const Stacks = { RoomIds: [], timer: null };
 
@@ -145,22 +146,26 @@ ipcMain.on("OtherWindow", (event, page) => {
     });
 });
 
-ipcMain.on(
-  "SaveFile",
-  async (
-    event,
-    Data,
-    name = Date.now(),
-    encoding = "buffer",
-    filters = [{ name: "All Files", extensions: ["*"] }]
-  ) => {
-    const { filePath } = await dialog.showSaveDialog({
-      defaultPath: name,
-      filters,
-    });
-    if (filePath) await writeFile(filePath, Data, { encoding });
+ipcMain.on("SaveFiles", async (event, Datas, name, encoding = "buffer") => {
+  const isArray = Array.isArray(Datas);
+  const { filePath } = await dialog.showSaveDialog({
+    defaultPath: name,
+    filters: [{ name: "All Files", extensions: ["*"] }],
+    title: isArray ? "保存文件夹" : "保存文件",
+  });
+  if (filePath) {
+    if (isArray) {
+      await mkdir(filePath);
+      for (let i = 0; i < Datas.length; i++) {
+        writeFile(join(filePath, `./${i}.png`), Datas[i], {
+          encoding,
+        });
+      }
+    } else {
+      writeFile(filePath, Datas, { encoding });
+    }
   }
-);
+});
 
 ipcMain.handle("GetDynamic", async (event, ids) => {
   ids = ids.map(async (v) => await Replies(await GetDynamic(v, 0)));

src/pages/other/views/Anime.vue

@@ -174,7 +174,7 @@ export default {
         });
       const doc = new Document({ title: "动画鉴赏", sections });
       const buffer = await Packer.toBuffer(doc);
-      ipcRenderer.send("SaveFile", buffer, `${Date.now()}.docx`);
+      ipcRenderer.send("SaveFiles", buffer, `${Date.now()}.docx`);
     },
     open({ target }) {
       const href = target.href;

src/pages/other/views/Candy.vue

@@ -1,5 +1,19 @@
 <template>
   <v-container>
+    <v-file-input
+      label="上传xlsx"
+      hint="请确保文件中包含 中文 和 日文 的列标题"
+      persistent-hint
+      :loading="loading"
+      v-model="file"
+    />
+    <section class="my-3" @click="read">
+      <v-btn outlined color="primary" small data-type="cn"> 导出中文 </v-btn>
+      <v-btn small outlined color="primary" class="mx-3" data-type="jp">
+        导出日语
+      </v-btn>
+      <v-btn outlined small color="primary" data-type="merge"> 合并导出 </v-btn>
+    </section>
     <v-radio-group row v-model="direction">
       <v-radio label="横排" value="row" />
       <v-radio label="竖排" value="column" />
@@ -12,27 +26,16 @@
         class="d-flex"
         :class="`flex-${direction}`"
       >
-        <Card id="dom-to-image-jp">マシュマロ</Card>
-        <Card id="dom-to-image-cn">棉花糖</Card>
+        <Card id="dom-to-image-cn" tip="棉花糖" />
+        <Card id="dom-to-image-jp" tip="マシュマロ" />
       </section>
     </section>
-    <section class="my-3">
-      <v-btn outlined color="primary" small @click="merge" data-type="cn">
-        导出中文
-      </v-btn>
-      <v-btn
-        small
-        outlined
-        color="primary"
-        class="mx-3"
-        @click="merge"
-        data-type="jp"
-      >
+    <section class="my-3" @click="merge">
+      <v-btn outlined color="primary" small data-type="cn"> 导出中文 </v-btn>
+      <v-btn small outlined color="primary" class="mx-3" data-type="jp">
         导出日语
       </v-btn>
-      <v-btn outlined small color="primary" @click="merge" data-type="merge">
-        合并导出
-      </v-btn>
+      <v-btn outlined small color="primary" data-type="merge"> 合并导出 </v-btn>
     </section>
   </v-container>
 </template>
@@ -41,25 +44,63 @@
 import { ipcRenderer } from "electron";
 import Card from "../../../components/Card.vue";
 import HtmlToCanvas from "html2canvas";
+import { read, utils } from "xlsx";
 
 export default {
   name: "App",
   components: { Card },
   data: () => ({
     direction: "column",
     items: [{ title: "棉花糖", icon: "mdi-candy", to: "/" }],
+    file: null,
+    loading: false,
   }),
   methods: {
     async merge({ target }) {
       const type = target.dataset.type || target.parentElement.dataset.type;
-      const Dom = document.getElementById(`dom-to-image-${type}`);
-      const canvas = await HtmlToCanvas(Dom);
-      const Base64 = canvas
-        .toDataURL()
-        .replace(/^data:image\/(png|gif|jpeg);base64,/, "");
-      ipcRenderer.send("SaveFile", Base64, `${Date.now()}.png`, "base64", [
-        { name: "Images", extensions: ["jpg", "png", "gif"] },
-      ]);
+      if (type) {
+        const Dom = document.getElementById(`dom-to-image-${type}`);
+        const canvas = await HtmlToCanvas(Dom);
+        const Base64 = canvas
+          .toDataURL()
+          .replace(/^data:image\/(png|gif|jpeg);base64,/, "");
+        ipcRenderer.send("SaveFiles", Base64, `${Date.now()}.png`, "base64");
+      }
+    },
+    read({ target: { dataset, parentElement } }) {
+      const reader = new FileReader();
+      const type = dataset.type || parentElement.dataset.type;
+      const chinese = document.querySelector("#dom-to-image-cn .card-text");
+      const japanese = document.querySelector("#dom-to-image-jp .card-text");
+      this.loading = true;
+      if (type) {
+        const Dom = document.getElementById(`dom-to-image-${type}`);
+        reader.addEventListener("load", async ({ target }) => {
+          const { Sheets } = read(target.result, { type: "buffer" });
+          const result = [];
+          for (const key in Sheets) {
+            const json = utils.sheet_to_json(Sheets[key]);
+            for (const item of json) {
+              chinese.innerText = item["中文"];
+              japanese.innerText = item["日文"];
+              const Base64 = (await HtmlToCanvas(Dom))
+                .toDataURL()
+                .replace(/^data:image\/(png|gif|jpeg);base64,/, "");
+              result.push(Base64);
+            }
+          }
+          ipcRenderer.send(
+            "SaveFiles",
+            result,
+            Date.now().toString(),
+            "base64"
+          );
+          chinese.innerText = "";
+          japanese.innerText = "";
+          this.loading = false;
+        });
+        reader.readAsArrayBuffer(this.file);
+      }
     },
   },
 };

src/plugins/utils.js

@@ -1,7 +1,7 @@
 import BrotliDecode from "brotli/decompress";
 import { GetVideoDurantion } from "./axios";
 import { ipcRenderer } from "electron";
-import { writeFile, utils } from "xlsx";
+import { writeFileXLSX, utils } from "xlsx";
 
 export const FormatComment = (content, select = [], fix = {}, shield = []) => {
   if (content.length <= 0 || select.length <= 0)
@@ -203,7 +203,7 @@ export const ExportExcel = (body, header, name, title, config = {}) => {
   sheet["!rows"] = config.rows || new Array(body.length + 1).fill({ hpt: 20 });
   utils.book_append_sheet(workbook, sheet, title || name);
   name += ".xlsx";
-  writeFile(workbook, name);
+  writeFileXLSX(workbook, name);
 };
 
 export const FormatDuration = (value, hour = false) => {