diff --git a/gyxtp/package-lock.json b/gyxtp/package-lock.json index ab9d4c9..d5a5f95 100644 --- a/gyxtp/package-lock.json +++ b/gyxtp/package-lock.json @@ -21,7 +21,9 @@ "fabric": "^6.4.3", "mammoth": "^1.11.0", "mammoth-math": "^0.0.2", + "mathjax": "^3.2.2", "mathjax-full": "^3.2.2", + "mathml-to-latex": "^1.5.0", "neovis.js": "^2.1.0", "pdfjs-dist": "^5.4.149", "relation-graph-vue3": "^2.2.11", @@ -10289,6 +10291,11 @@ "node": ">= 0.4" } }, + "node_modules/mathjax": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz", + "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw==" + }, "node_modules/mathjax-full": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz", @@ -10301,6 +10308,14 @@ "speech-rule-engine": "^4.0.6" } }, + "node_modules/mathml-to-latex": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/mathml-to-latex/-/mathml-to-latex-1.5.0.tgz", + "integrity": "sha512-rrWn0eEvcEcdMM4xfHcSGIy+i01DX9byOdXTLWg+w1iJ6O6ohP5UXY1dVzNUZLhzfl3EGcRekWLhY7JT5Omaew==", + "dependencies": { + "@xmldom/xmldom": "^0.8.10" + } + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz", @@ -23838,6 +23853,11 @@ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", "dev": true }, + "mathjax": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz", + "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw==" + }, "mathjax-full": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz", @@ -23849,6 +23869,14 @@ "speech-rule-engine": "^4.0.6" } }, + "mathml-to-latex": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/mathml-to-latex/-/mathml-to-latex-1.5.0.tgz", + "integrity": "sha512-rrWn0eEvcEcdMM4xfHcSGIy+i01DX9byOdXTLWg+w1iJ6O6ohP5UXY1dVzNUZLhzfl3EGcRekWLhY7JT5Omaew==", + "requires": { + "@xmldom/xmldom": "^0.8.10" + } + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz", diff --git a/gyxtp/package.json b/gyxtp/package.json index 8a9b855..bedabfd 100644 --- a/gyxtp/package.json +++ b/gyxtp/package.json @@ -18,7 +18,9 @@ "fabric": "^6.4.3", "mammoth": "^1.11.0", "mammoth-math": "^0.0.2", + "mathjax": "^3.2.2", "mathjax-full": "^3.2.2", + "mathml-to-latex": "^1.5.0", "neovis.js": "^2.1.0", "pdfjs-dist": "^5.4.149", "relation-graph-vue3": "^2.2.11", diff --git a/gyxtp/src/view/docInfo.vue b/gyxtp/src/view/docInfo.vue index ffbfb9a..b88907e 100644 --- a/gyxtp/src/view/docInfo.vue +++ b/gyxtp/src/view/docInfo.vue @@ -189,7 +189,52 @@
- +
+ +

+ 娃哈哈 + + + ± + + + ⋃ + + n + = + 1 + + + m + + + + + ( + + + X + + + 2 + + + ∩ + + + Y + + + n + + + ) + + + + + 11 +

@@ -369,7 +414,7 @@ import RelationGraph from 'relation-graph-vue3'; import HeaderInfo from '../components/UseAll/headerInfo' import leftInfo from "../components/UseAll/leftInfo"; import {ElMessage} from 'element-plus' -import { mathmlToLatex } from 'mammoth-math'; +import { convert } from 'mathml-to-latex'; const graphOptions = { debug: true, backgrounImageNoRepeat: true, @@ -407,6 +452,39 @@ const graphOptions = { }, backgroundColor: "#2d3562" }; +// ✅ 放在 methods 外部或 script 顶层 +function transformOMath(element) { + console.log('🟢 transformOMath:', element.type, element.name); + + // 模糊匹配 oMath + if (element.type === 'element' && + typeof element.name === 'string' && + (element.name.includes('}oMath') || element.name.includes('}oMathPara'))) { + console.log('🎉 捕获 oMath 元素:', element); + const text = extractMathText(element).trim(); + return { + type: 'element', + name: 'span', + attributes: [{ name: 'class', value: 'math-formula' }], + children: [{ type: 'text', value: `$${text || '公式'}$` }] + }; + } + + if (Array.isArray(element.children)) { + element.children = element.children.map(transformOMath); + } + + return element; +} + +function extractMathText(element) { + if (!element) return ''; + if (element.type === 'text') return element.value || ''; + if (element.children) { + return element.children.map(extractMathText).join(''); + } + return ''; +} export default { name: 'docInfo', components: { @@ -505,39 +583,46 @@ export default { }; }, methods: { - async loadDocx(url) { - try { - const response = await fetch(url); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - const arrayBuffer = await response.arrayBuffer(); - - // ✅ 使用 mammoth-math 的 mathmlToLatex - const result = await mammoth.convertToHtml( - { arrayBuffer }, - { - mathConverter: mathmlToLatex - } - ); - - // 还原图片 - let htmlContent = result.value.replace( - /<img\s+src=["']([^"']+)["'][^&]*>/gi, - (match, src) => `` - ); - - this.htmlContent = htmlContent; - this.loading = false; - this.renderMath(); - this.$nextTick(() => { - this.renderMath(); - }); - } catch (err) { - console.error('加载或解析失败:', err); - this.error = `无法加载文档: ${err.message}`; - this.loading = false; - } - }, + + // 你的 loadDocx 方法（已修改） + async loadDocx(url) { + try { + const response = await fetch(url); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + + const arrayBuffer = await response.arrayBuffer(); + + // ✅ 修复：使用 this.transformOMath + const result = await mammoth.convertToHtml( + { arrayBuffer }, + { transformDocument: transformOMath } // ✅ 加了 this. + ); + + console.log('转换结果:', result); + + let htmlContent = result.value; + + // 修复图片标签 + htmlContent = htmlContent.replace( + /<img\s+src=["']([^"']+)["'][^&]*>/gi, + '' + ); + + this.htmlContent = htmlContent; + this.loading = false; + + this.$nextTick(() => { + this.renderMath(); + }); + + } catch (err) { + console.error('加载或解析失败:', err); + this.error = `无法加载文档: ${err.message}`; + this.loading = false; + } + }, + // loadDocx(url) { // // url = "http://localhost/dev-api/api/docxFile/高影响战场天气过程分析与预报 .docx_20251029_173422/wordSplitter/（二）“CH、CM、CL”.docx"; // @@ -1181,37 +1266,33 @@ export default { }, async renderMath() { try { - // 动态导入 startup - const { MathJax } = await import('mathjax-full/js/components/startup.js'); - - // 配置 - window.MathJax = MathJax; - MathJax.config = { - loader: { load: ['input/tex', 'output/chtml'] }, - tex: { - inlineMath: [['$', '$'], ['\\(', '\\)']], - displayMath: [['$$', '$$'], ['\\[', '\\]']] - } - }; + // ✅ 使用预构建版本 —— 它会自动启动并设置 window.MathJax + if (!window.MathJax) { + await import('mathjax-full/es5/tex-chtml.js'); + } - // ✅ 现在这个 promise 应该不会再卡住 - await MathJax.startup.promise; - console.log('✅ MathJax 初始化完成'); + const MathJax = window.MathJax; - // ✅ typesetPromise 现在可用 - const target = this.$refs.content; - if (target && typeof window.MathJax.typesetPromise === 'function') { - await window.MathJax.typesetPromise([target]); - console.log('✅ 公式渲染成功！'); + // 确保 startup 已存在 + if (MathJax?.startup?.promise) { + console.log('等待 MathJax 初始化...'); + await MathJax.startup.promise; // 现在这里会正常 resolve + console.log('✅ MathJax 初始化完成'); } + // 执行渲染 + if (typeof MathJax.typesetPromise === 'function') { + await MathJax.typesetPromise([this.$refs.testMath]); + console.log('✅ 公式渲染成功'); + } } catch (err) { - console.error('❌ MathJax 初始化失败', err); + console.error('❌ MathJax 渲染失败', err); } }, goSearch() { this.$router.push({name: 'docList', query: {word: this.searchWord}}); }, + }, mounted() { this.getInfoInit(); diff --git a/ruoyi-ui/src/views/system/fileManage/indexNB.vue b/ruoyi-ui/src/views/system/fileManage/indexNB.vue index ec30dea..4673de8 100644 --- a/ruoyi-ui/src/views/system/fileManage/indexNB.vue +++ b/ruoyi-ui/src/views/system/fileManage/indexNB.vue @@ -386,7 +386,9 @@ placeholder="仅限汉字或字母"> - + + +