|
|
|
@ -189,7 +189,52 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div ref="content" v-html="htmlContent" class="docx-content"></div> |
|
|
|
|
|
|
|
<div ref="testMath"> |
|
|
|
|
|
|
|
<p> |
|
|
|
娃哈哈 |
|
|
|
|
|
|
|
<math xmlns:mml="http://www.w3.org/1998/Math/MathML"> |
|
|
|
<mml:mo>±</mml:mo> |
|
|
|
<mml:mrow> |
|
|
|
<mml:msubsup> |
|
|
|
<mml:mo stretchy="false">⋃</mml:mo> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mi>n</mml:mi> |
|
|
|
<mml:mo>=</mml:mo> |
|
|
|
<mml:mn>1</mml:mn> |
|
|
|
</mml:mrow> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mi>m</mml:mi> |
|
|
|
</mml:mrow> |
|
|
|
</mml:msubsup> |
|
|
|
<mml:mrow> |
|
|
|
<mrow> |
|
|
|
<mo>(</mo> |
|
|
|
<mml:msub> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mi>X</mml:mi> |
|
|
|
</mml:mrow> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mn>2</mml:mn> |
|
|
|
</mml:mrow> |
|
|
|
</mml:msub> |
|
|
|
<mml:mo>∩</mml:mo> |
|
|
|
<mml:msub> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mi>Y</mml:mi> |
|
|
|
</mml:mrow> |
|
|
|
<mml:mrow> |
|
|
|
<mml:mi>n</mml:mi> |
|
|
|
</mml:mrow> |
|
|
|
</mml:msub> |
|
|
|
<mo>)</mo> |
|
|
|
</mrow> |
|
|
|
</mml:mrow> |
|
|
|
</mml:mrow> |
|
|
|
</math> |
|
|
|
11 |
|
|
|
</p ></div> |
|
|
|
|
|
|
|
<div class="yuanwen" v-html="contentInfo.content"></div> |
|
|
|
</div> |
|
|
|
@ -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) => `<img src="${src}" style="max-width:100%">` |
|
|
|
); |
|
|
|
|
|
|
|
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, |
|
|
|
'<img src="$1" style="max-width:100%;">' |
|
|
|
); |
|
|
|
|
|
|
|
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(); |
|
|
|
|
