更新

src/components/ExtractionText/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="modelValue"
+      title="文件解析"
+      width="1000px"
+      :show-close="true"
+      :center="true"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+    >
+      <h1>文件文本提取工具</h1>
+      <p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>
+
+      <div class="container">
+        <input
+          type="file"
+          id="file-input"
+          accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"
+        />
+        <button @click="chooseFile">选择文件</button>
+        <p id="file-info">未选择文件</p>
+      </div>
+
+      <button id="extract-btn" disabled>提取文本</button>
+
+      <h3>提取结果：</h3>
+      <div id="result">请先上传文件...</div>
+      <template #footer>
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+});
+const emits = defineEmits(["update:modelValue", "change"]);
+onMounted(() => {
+  nextTick(() => {
+    const fileInput = document.getElementById("file-input");
+    const fileInfo = document.getElementById("file-info");
+    const extractBtn = document.getElementById("extract-btn");
+    const resultDiv = document.getElementById("result");
+    let selectedFile = null;
+    // 监听文件选择
+    fileInput.addEventListener("change", function (e) {
+      if (e.target.files.length > 0) {
+        selectedFile = e.target.files[0];
+        fileInfo.textContent = `已选择: ${selectedFile.name} (${(
+          selectedFile.size / 1024
+        ).toFixed(2)} KB)`;
+        extractBtn.disabled = false;
+      } else {
+        selectedFile = null;
+        fileInfo.textContent = "未选择文件";
+        extractBtn.disabled = true;
+      }
+      if (selectedFile.type == "video/mp4") {
+        upfileOnchange(selectedFile);
+      }
+    });
+    // 提取文本按钮点击事件
+    extractBtn.addEventListener("click", async function () {
+      if (!selectedFile) return (resultDiv.textContent = "请先选择文件");
+      resultDiv.textContent = "正在处理文件...";
+      try {
+        let text = "";
+        const fileType = selectedFile.name.split(".").pop().toLowerCase();
+        console.log(selectedFile);
+
+        if (fileType === "txt") {
+          // 处理文本文件
+          text = await readTextFile(selectedFile);
+        } else if (fileType === "pdf") {
+          // 处理PDF文件
+          text = await extractTextFromPDF(selectedFile);
+        } else if (fileType === "docx") {
+          // 处理Word文件
+          text = await extractTextFromDocx(selectedFile);
+          console.log(text, "===word");
+        } else if (["mp4", "mp3", "wav"].includes(fileType)) {
+          // 处理mp4,mp3,wav文件
+          await start();
+          text = "数据加载有点慢，请稍等。。。。";
+          setTimeout(() => {
+            resultDiv.textContent = videoText;
+          }, 2000);
+        } else {
+          throw new Error("不支持的文件类型");
+        }
+        resultDiv.textContent = text || "未提取到文本内容";
+      } catch (error) {
+        resultDiv.textContent = `处理失败: ${error.message}`;
+        console.error(error);
+      }
+    });
+  });
+});
+
+// 读取文本文件
+function readTextFile(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.onerror = (e) => reject(new Error("文件读取失败"));
+    reader.readAsText(file);
+  });
+}
+
+// 提取PDF文本
+async function extractTextFromPDF(file) {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+
+    fileReader.onload = async function () {
+      try {
+        const typedArray = new Uint8Array(this.result);
+        const pdf = await pdfjsLib.getDocument(typedArray).promise;
+        let fullText = "";
+
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const textContent = await page.getTextContent();
+          const text = textContent.items.map((item) => item.str).join(" ");
+          fullText += text + "\n\n";
+        }
+
+        resolve(fullText);
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    fileReader.onerror = reject;
+    fileReader.readAsArrayBuffer(file);
+  });
+}
+
+// 提取Word文档文本
+async function extractTextFromDocx(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = function (event) {
+      const arrayBuffer = event.target.result;
+
+      mammoth
+        .extractRawText({ arrayBuffer: arrayBuffer })
+        .then(function (result) {
+          resolve(result.value);
+        })
+        .catch(function (error) {
+          reject(error);
+        });
+    };
+
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+const onComfirm = () => {
+  const resultDiv = document.getElementById("result");
+  let obj = {
+    text: resultDiv.textContent
+  };
+  emits("change", obj);
+};
+
+// 关闭
+const handleClose = () => {
+  const resultDiv = document.getElementById("result");
+  resultDiv.textContent = "请先上传文件";
+  const fileInfo = document.getElementById("file-info");
+  fileInfo.textContent = "未选择文件";
+  emits("update:modelValue", false);
+};
+
+const chooseFile = () => {
+  document.getElementById("file-input").click();
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  border: 2px dashed #ccc;
+  padding: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#file-input {
+  display: none;
+}
+
+button {
+  background: #4caf50;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 4px;
+}
+
+button:hover {
+  background: #45a049;
+}
+
+#result {
+  margin-top: 20px;
+  white-space: pre-wrap;
+  background: #f9f9f9;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  height: 320px;
+  overflow-y: auto;
+}
+
+#file-info {
+  margin: 10px 0;
+  font-style: italic;
+  color: #666;
+}
+
+::v-deep .el-dialog {
+  margin-top: 10px;
+}
+</style>