refactor(RenderMinerU):优化表格处理和 Markdown 渲染逻辑

- 重新组织表格处理相关函数,提高代码可读性
- 优化 Markdown 渲染流程,支持 ebiz-code 标签
- 调整分页逻辑,确保正确加载和渲染 Markdown 内容
- 如果md 不包含ebiz-code 查询分页 如果包含则不查询
This commit is contained in:
陈昱达
2025-04-21 16:48:13 +08:00
parent 0554c58e8a
commit 77b097d0d9
2 changed files with 37 additions and 38 deletions

View File

@@ -206,6 +206,7 @@ export default {
filters: {}, filters: {},
methods: { methods: {
//changePage //changePage
// 分页发生改变时
changePage(page) { changePage(page) {
let documentId = document.getElementById(`view-code-${page - 1}`) let documentId = document.getElementById(`view-code-${page - 1}`)
let viewBody = document.getElementById('viewBody') let viewBody = document.getElementById('viewBody')
@@ -221,7 +222,7 @@ export default {
} }
}, },
//重新识别 //重新识别表格
retryMinerImage(chooseItem, loading, tableElement) { retryMinerImage(chooseItem, loading, tableElement) {
imageRetry({ imageRetry({
documentId: this.documentId, documentId: this.documentId,
@@ -238,8 +239,8 @@ export default {
}) })
}, },
// 生成视觉模型 // 生成视觉模型按钮
viewHtmlModel() { generateTableButtons() {
this.$nextTick(() => { this.$nextTick(() => {
const mdHtml = document.getElementById('md-editor') const mdHtml = document.getElementById('md-editor')
// 监听鼠标悬停事件,为表格元素添加浮层按钮 // 监听鼠标悬停事件,为表格元素添加浮层按钮
@@ -278,7 +279,6 @@ export default {
}) })
}) })
}, },
// 封装 按钮生成事件 // 封装 按钮生成事件
generateButton(tableElement, buttonContainer, actionButtons) { generateButton(tableElement, buttonContainer, actionButtons) {
// 获取表格的可编辑状态 // 获取表格的可编辑状态
@@ -303,7 +303,6 @@ export default {
buttonContainer.appendChild(button) buttonContainer.appendChild(button)
} }
}, },
// 查找匹配的表格 // 查找匹配的表格
findMatchingTable(tableElement) { findMatchingTable(tableElement) {
let chooseItem = null let chooseItem = null
@@ -333,7 +332,6 @@ export default {
} }
return chooseItem return chooseItem
}, },
// 获取表格文本 // 获取表格文本
getTableText(tableElement) { getTableText(tableElement) {
let stringTable = tableElement.innerHTML let stringTable = tableElement.innerHTML
@@ -345,7 +343,6 @@ export default {
} }
return '' return ''
}, },
// 从 HTML 中获取表格文本 // 从 HTML 中获取表格文本
getTableTextFromHtml(html) { getTableTextFromHtml(html) {
let tableMatch = html.match(/<table>([\s\S]*)<\/table>/) let tableMatch = html.match(/<table>([\s\S]*)<\/table>/)
@@ -356,15 +353,14 @@ export default {
} }
return '' return ''
}, },
// 更新表格属性 // 更新表格属性
updateTableAttributes(tableElement, chooseItem) { updateTableAttributes(tableElement, chooseItem) {
tableElement.setAttribute('data-path-id', this.selectionImagePath.replace(/\.[^/.]+$/, '')) tableElement.setAttribute('data-path-id', this.selectionImagePath.replace(/\.[^/.]+$/, ''))
let fileType = this.selectionImagePath.match(/\.[^/.]+$/)[0] let fileType = this.selectionImagePath.match(/\.[^/.]+$/)[0]
tableElement.setAttribute('data-path-type', fileType) tableElement.setAttribute('data-path-type', fileType)
}, },
// 获取bbox 的 表格图片生成对照表
linesMap(table) { extractTableData(table) {
;(table.blocks ? table.blocks : []).map(lines => { ;(table.blocks ? table.blocks : []).map(lines => {
lines.lines.map(spans => { lines.lines.map(spans => {
spans.spans.map(span => { spans.spans.map(span => {
@@ -373,12 +369,13 @@ export default {
}) })
}) })
}, },
setTableSelection(selection) { // 填充对照表
fillSelectionTable(selection) {
selection.map(item => { selection.map(item => {
if (item.preproc_blocks && item.preproc_blocks.length > 0) { if (item.preproc_blocks && item.preproc_blocks.length > 0) {
item.preproc_blocks.forEach(block => { item.preproc_blocks.forEach(block => {
if (block.type === 'table') { if (block.type === 'table') {
this.linesMap(block) this.extractTableData(block)
} }
}) })
} }
@@ -386,23 +383,21 @@ export default {
if (item.discarded_blocks && item.discarded_blocks.length > 0) { if (item.discarded_blocks && item.discarded_blocks.length > 0) {
item.discarded_blocks.forEach(block => { item.discarded_blocks.forEach(block => {
if (block.type === 'table') { if (block.type === 'table') {
this.linesMap(block) this.extractTableData(block)
} }
}) })
} }
}) })
}, },
// 导出 // 导出
emitMarkDown() { emitMarkDown() {
let pre = document.getElementById('md-editor').innerText let pre = document.getElementById('md-editor').innerText
this.$emit('getMarkDownIt', { innerText: pre }) this.$emit('getMarkDownIt', { innerText: pre })
}, },
// 保存markdown
saveMarkDown() { saveMarkDown() {
let pre = document.getElementById('md-editor').innerHTML let pre = document.getElementById('md-editor').innerHTML
// pre + ebiz-code标签 // pre + ebiz-code标签
minerUMarkDownUpdate({ minerUMarkDownUpdate({
documentId: this.documentId, documentId: this.documentId,
newMd: pre newMd: pre
@@ -446,14 +441,15 @@ export default {
minerUBbox({ documentId: this.documentId }).then(res => { minerUBbox({ documentId: this.documentId }).then(res => {
this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content))) this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content)))
this.setTableSelection(JSON.parse(JSON.stringify(res.content.content))) this.fillSelectionTable(JSON.parse(JSON.stringify(res.content.content)))
// this.$refs.iframe 重新刷新iframe // this.$refs.iframe 重新刷新iframe
this.$refs.iframe.contentWindow.location.reload() this.$refs.iframe.contentWindow.location.reload()
this.getMdPage()
this.getPDFDetailMarkDown()
}) })
}, },
// 获取md分页
getMdPage() { getMdPage(back) {
let responseText = '' let responseText = ''
getMd_info({ documentId: this.documentId }).then(async res => { getMd_info({ documentId: this.documentId }).then(async res => {
if (res) { if (res) {
@@ -465,14 +461,24 @@ export default {
responseText += `<ebiz-code id='ebiz-code-${i}'></ebiz-code> responseText += `<ebiz-code id='ebiz-code-${i}'></ebiz-code>
${text}` ${text}`
} }
this.getPDFDetailMarkDown(responseText) back(responseText)
} }
}) })
}, },
// 渲染markdown
renderMarkDown() {
this.markdown = this.markdown
.replace(/<table/g, () => {
const uniqueId = `table-${this.tableIdCounter++}`
return `<table contenteditable='false' class="m-view"`
})
.replace(/<script/g, '< script')
this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
},
// tab 切换
changeTab(evt) { changeTab(evt) {
let editor = document.getElementById('md-editor') let editor = document.getElementById('md-editor')
// pre 获取 table的html 给table 增加 对照表的path id // pre 获取 table的html 给table 增加 对照表的path id
let pre = editor.innerHTML let pre = editor.innerHTML
let tables = editor.querySelectorAll('table') let tables = editor.querySelectorAll('table')
@@ -491,30 +497,24 @@ ${text}`
// 给 copyMdHtml 里面的table 增加 class m-view // 给 copyMdHtml 里面的table 增加 class m-view
// copyMdHtml = copyMdHtml.re // copyMdHtml = copyMdHtml.re
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code')) this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
setTimeout(() => { setTimeout(() => {
this.changePage(this.page, evt) this.changePage(this.page, evt)
}, 100) }, 100)
}, },
// 初始md 文档 // 初始md 文档
async getPDFDetailMarkDown(responseText) { async getPDFDetailMarkDown() {
// responseText 判断是否包含ebiz-code // responseText 判断是否包含ebiz-code
const response = await fetch(minerUMarkDown({ documentId: this.documentId })) const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
this.markdown = await response.text() this.markdown = await response.text()
// this.markdown 包含 ebiz-code // this.markdown 包含 ebiz-code
if (this.markdown.indexOf('<ebiz-code ') < 0) { if (this.markdown.indexOf('<ebiz-code ') < 0) {
this.markdown = responseText this.getMdPage(responseText => {
} this.markdown = responseText
this.renderMarkDown()
this.markdown = this.markdown
.replace(/<table/g, () => {
const uniqueId = `table-${this.tableIdCounter++}`
return `<table contenteditable='false' class="m-view"`
}) })
.replace(/<script/g, '< script') } else {
this.renderMarkDown()
let text = this.markdown }
this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
}, },
// 向 iframe 发送消息 // 向 iframe 发送消息
sendMessageToIframe(type, message) { sendMessageToIframe(type, message) {
@@ -531,7 +531,6 @@ ${text}`
) )
} }
}, },
// 获取识别状态 // 获取识别状态
getMinerUStatus() { getMinerUStatus() {
this.finishedMiner = true this.finishedMiner = true
@@ -606,7 +605,7 @@ ${text}`
} }
}) })
this.viewHtmlModel() this.generateTableButtons()
}, },
computed: {} computed: {}
} }

View File

@@ -52,7 +52,7 @@ export default {
name: 'create', name: 'create',
data() { data() {
return { return {
visible: false, visible: true,
active: 0, active: 0,
documentId: '1363864715567140864' documentId: '1363864715567140864'
} }