vue 识别word表格中的图片

news/2025/3/17 22:24:05/

在这里插入图片描述

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

<template><div word">class="container"><h2>提取 Word 表格中的图片</h2><input type="file" @change="handleFileUpload" accept=".docx"><div v-word">if="tables.length"><h3>解析结果:</h3><div v-word">for="(table, index) in tables" :key="index"><table border="1"><tbody><tr v-word">for="(row, rowIndex) in table" :key="rowIndex"><td v-word">for="(cell, cellIndex) in row" :key="cellIndex" v-html="cell"></td></tr></tbody></table></div></div></div>
</template><script>
word">import JSZip word">from "jszip";word">export word">default {data() {word">return {tables: []};},methods: {word">async handleFileUpload(event) {word">const file = event.target.files[0];word">if (!file) word">return alert("请选择一个 Word 文件");word">const zip = word">await JSZip.loadAsync(file);console.log("ZIP 文件结构:", Object.keys(zip.files)); // 调试 ZIP 内的文件结构word">const documentXml = word">await word">this.readXmlFile(zip, "word/document.xml");word">const relsXml = word">await word">this.readXmlFile(zip, "word/_rels/document.xml.rels");word">if (!documentXml || !relsXml) {alert("无法解析 Word 文件");word">return;}word">const parser = word">new DOMParser();word">const docXml = parser.parseFromString(documentXml, "application/xml");word">const relsXmlDoc = parser.parseFromString(relsXml, "application/xml");word">const tables = docXml.getElementsByTagName("w:tbl");word">if (!tables.length) {alert("未找到 Word 表格");word">return;}word">let extractedTables = [];word">for (word">let i = 0; i < tables.length; i++) {word">let tableArray = [];word">const rows = tables[i].getElementsByTagName("w:tr");word">for (word">let row word">of rows) {word">let rowArray = [];word">const cells = row.getElementsByTagName("w:tc");word">for (word">let cell word">of cells) {word">let cellContent = word">this.extractText(cell);// 查找单元格内的图片word">const images = word">await word">this.extractImages(cell, relsXmlDoc, zip);word">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);}word">this.tables = extractedTables;},word">async readXmlFile(zip, filePath) {word">const file = zip.file(filePath);word">return file ? word">await file.async("string") : word">null;},extractText(cell) {word">const paragraphs = cell.getElementsByTagName("w:p");word">let text = "";word">for (word">let paragraph word">of paragraphs) {word">const runs = paragraph.getElementsByTagName("w:r");word">for (word">let run word">of runs) {word">const texts = run.getElementsByTagName("w:t");word">for (word">let textNode word">of texts) {text += textNode.textContent + " ";}}}word">return text.trim();},word">async extractImages(cell, relsXmlDoc, zip) {word">let imageSources = [];word">const drawings = cell.getElementsByTagName("w:drawing");word">const picts = cell.getElementsByTagName("w:pict"); // 兼容旧格式word">const imagesToProcess = [];// 处理 w:drawing 图片word">for (word">let drawing word">of drawings) {word">const blips = drawing.getElementsByTagName("a:blip");word">for (word">let blip word">of blips) {word">const embed = blip.getAttribute("r:embed");word">if (embed) imagesToProcess.push(embed);}}// 处理 w:pict 图片word">for (word">let pict word">of picts) {word">const imgs = pict.getElementsByTagName("v:imagedata");word">for (word">let img word">of imgs) {word">const embed = img.getAttribute("r:id");word">if (embed) imagesToProcess.push(embed);}}console.log("提取到的图片 ID:", imagesToProcess); // 调试word">const imagePromises = imagesToProcess.map(word">async (embed) => {word">const rel = relsXmlDoc.querySelector(`Relationship[Id="${embed}"]`);word">if (rel) {word">const target = rel.getAttribute("Target");word">let imagePath = `word/${target}`;console.log("图片路径:", imagePath); // 调试word">if (zip.file(imagePath)) {word">return word">await zip.file(imagePath).async("base64").then(base64 => `data:image/png;base64,${base64}`);}}});word">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.ppmy.cn/news/1579929.html

相关文章

某大厂自动化工程师面试题

一些大厂的自动化工程师面试题汇总: 基础知识类 请解释什么是PLC(可编程逻辑控制器)?什么是PID控制?它在自动化系统中的作用是什么?请描述一下工业4.0的基本概念。编程与控制系统类 你熟悉哪些PLC编程语言?请举例说明。如何在SCADA系统中实现数据采集和监控?请解释一下…

获取pytdx行情服务器ip和port

之前一直用的api.connect(124.71.187.122, 7709)突然不能用了&#xff0c;调查了一下&#xff0c;给出如下解决方案 打开通达信客户端&#xff0c;选项->通讯设置。 勾掉"登录时查找最快的主站"&#xff0c;手动选择"行情主站"&#xff0c;点确定。 点…

【SpringMVC】入门版

1.基本概念 1.1三层架构 三层架构也就是我们常说的b/s架构中的表现层&#xff0c;业务层和持久层,每层都各司其职&#xff0c;下面来分别讲解这三层的作用。 表现层&#xff1a; 也就是我们常说的web层。它负责接收客户端的请求&#xff0c;向客户端响应结果&#xff0c;通…

【前端】Vue3 + AntdVue + Ts + Vite4 + pnpm + Pinia 实战

文章目录 一、项目搭建1.1 生态工具对比包管理 pnpm&#xff08;npm、yarn&#xff09;打包工具 vite &#xff08;webpack&#xff09; 1.2 项目创建1.2.0 项目搭建1.2.1 node 版本1.2.2 corepack1.2.3 npm install -g1.2.4 pnpm1.2.5 pnpm add types/node --save-dev1.2.6 pn…

Android (Kotlin) 高版本 DownloadManager 封装工具类,支持 APK 断点续传与自动安装

以下是一个针对 Android 高版本的 DownloadManager 封装工具类&#xff0c;支持 断点续传 和 自动安装 APK 功能。该工具类兼容 Android 10 及以上版本的文件存储策略&#xff0c;并适配了 FileProvider 和未知来源应用安装权限。 工具类&#xff1a;DownloadUtils import and…

【Go学习】04-4-Gorm框架-增删改查事务钩子

【Go学习】04-4-Gorm框架-增删改查 增删改查插入数据用指定的字段创建忽略字段批量插入map创建sql表达式使用原生sql语句 更新数据保存数据更新单个列更新多列更新选定的字段表达式子查询更新 删除数据查询数据查询函数whereselectorder分页count分组直接执行sql语句 事务和Hoo…

207、【图论】孤岛的总面积

题目 思路 相比于 206、【图论】岛屿数量&#xff0c;就是在这个代码的基础上。先遍历边界&#xff0c;将边界连接的岛屿变为0&#xff0c;然后再计算一遍当前为1的岛屿面积。 代码实现 import collectionsn, m list(map(int, input().split())) graph []for _ in range(n…

奇安信二面

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…