当前位置: 首页 > article >正文

vue 识别word表格中的图片

在这里插入图片描述

但是识别不出 .emf .tif
tif是不显示 emf这是不识别

<template>
  <div class="container">
    <h2>提取 Word 表格中的图片</h2>
    <input type="file" @change="handleFileUpload" accept=".docx">
    
    <div v-if="tables.length">
      <h3>解析结果:</h3>
      <div v-for="(table, index) in tables" :key="index">
        <table border="1">
          <tbody>
            <tr v-for="(row, rowIndex) in table" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex" v-html="cell"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import JSZip from "jszip";

export default {
  data() {
    return {
      tables: []
    };
  },
  methods: {
    async handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return alert("请选择一个 Word 文件");

      const zip = await JSZip.loadAsync(file);
      console.log("ZIP 文件结构:", Object.keys(zip.files)); // 调试 ZIP 内的文件结构

      const documentXml = await this.readXmlFile(zip, "word/document.xml");
      const relsXml = await this.readXmlFile(zip, "word/_rels/document.xml.rels");

      if (!documentXml || !relsXml) {
        alert("无法解析 Word 文件");
        return;
      }

      const parser = new DOMParser();
      const docXml = parser.parseFromString(documentXml, "application/xml");
      const relsXmlDoc = parser.parseFromString(relsXml, "application/xml");

      const tables = docXml.getElementsByTagName("w:tbl");
      if (!tables.length) {
        alert("未找到 Word 表格");
        return;
      }

      let extractedTables = [];
      for (let i = 0; i < tables.length; i++) {
        let tableArray = [];
        const rows = tables[i].getElementsByTagName("w:tr");

        for (let row of rows) {
          let rowArray = [];
          const cells = row.getElementsByTagName("w:tc");

          for (let cell of cells) {
            let cellContent = this.extractText(cell);

            // 查找单元格内的图片
            const images = await this.extractImages(cell, relsXmlDoc, zip);
            if (images.length) {
              cellContent += images.map(imgSrc => `<img src="${imgSrc}" style="max-width:100px;">`).join("<br>");
            }

            rowArray.push(cellContent);
          }
          tableArray.push(rowArray);
        }
        extractedTables.push(tableArray);
      }
      this.tables = extractedTables;
    },

    async readXmlFile(zip, filePath) {
      const file = zip.file(filePath);
      return file ? await file.async("string") : null;
    },

    extractText(cell) {
      const paragraphs = cell.getElementsByTagName("w:p");
      let text = "";

      for (let paragraph of paragraphs) {
        const runs = paragraph.getElementsByTagName("w:r");
        for (let run of runs) {
          const texts = run.getElementsByTagName("w:t");
          for (let textNode of texts) {
            text += textNode.textContent + " ";
          }
        }
      }
      return text.trim();
    },

    async extractImages(cell, relsXmlDoc, zip) {
      let imageSources = [];
      const drawings = cell.getElementsByTagName("w:drawing");
      const picts = cell.getElementsByTagName("w:pict"); // 兼容旧格式

      const imagesToProcess = [];

      // 处理 w:drawing 图片
      for (let drawing of drawings) {
        const blips = drawing.getElementsByTagName("a:blip");
        for (let blip of blips) {
          const embed = blip.getAttribute("r:embed");
          if (embed) imagesToProcess.push(embed);
        }
      }

      // 处理 w:pict 图片
      for (let pict of picts) {
        const imgs = pict.getElementsByTagName("v:imagedata");
        for (let img of imgs) {
          const embed = img.getAttribute("r:id");
          if (embed) imagesToProcess.push(embed);
        }
      }

      console.log("提取到的图片 ID:", imagesToProcess); // 调试

      const imagePromises = imagesToProcess.map(async (embed) => {
        const rel = relsXmlDoc.querySelector(`Relationship[Id="${embed}"]`);
        if (rel) {
          const target = rel.getAttribute("Target");
          let imagePath = `word/${target}`;

          console.log("图片路径:", imagePath); // 调试

          if (zip.file(imagePath)) {
            return await zip.file(imagePath).async("base64").then(base64 => `data:image/png;base64,${base64}`);
          }
        }
      });

      return Promise.all(imagePromises);
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: center;
}
</style>


http://www.kler.cn/a/589286.html

相关文章:

  • 纳米压印原理,仪器以及在AR眼镜中的应用
  • 鸿蒙的 Stage 模型
  • Spring(5)——IoC DI
  • 学习路之TP6 --重写vendor目录下的文件(服务覆盖command---优点:命令前后一致)
  • PentestGPT 下载
  • 在ArcGIS中对图斑进行自上而下从左往右编号
  • 如何解决ChatGPTplus/pro o1/o3模型无法识别图片或者文件,限制次数?
  • 力扣——排序链表
  • 浅述WinForm 和 WPF 的前景
  • Docker生存手册:安装到服务一本通
  • Part2:基于国内源完成Kubernetes集群部署
  • k8s-dashboard
  • 【学习笔记】【C++】哪些函数不能是虚函数
  • Chart GPT、DeepSeek 辅助学习H3C网络工程师考试(一)
  • rsync 备份 clickhouse
  • 【AI论文】MM-Eureka:基于规则的大规模强化学习探索视觉“啊哈”时刻
  • P1591 阶乘数码
  • 12.16some pro about py model
  • 微软.NET框架下通信技术理解与实践
  • STM32U575RIT6单片机(二)