feat(RenderMinerU): 实现 MD 文件加载及分页功能- 新增 getMd_info 和 mdIndex 函数,用于获取 MD 文件信息和内容

- 实现 MD 文件内容的渲染和分页滚动
- 优化编辑模式下的 Markdown 处理
- 去除无用的 console.log 语句
- 调整样式,隐藏滚动条
This commit is contained in:
陈昱达
2025-04-21 15:35:25 +08:00
parent 97ebe1926d
commit 22716957f2
5 changed files with 141 additions and 20 deletions

View File

@@ -15,12 +15,26 @@
class="miner-u el-card is-always-shadow ml20"
></iframe>
<div style="flex:1;" class="mh20 miner-u-md" v-loading="finishedMiner" element-loading-text="正在识别中...">
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab">
<el-tab-pane label="预览" style="overflow:scroll;">
<div v-html="markdownHtml" class="view-body" id="viewBody" ref="viewBody"></div>
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab" v-model="tab">
<el-tab-pane label="预览" style="overflow:scroll;" ref="scrollView" name="0">
<div
v-html="markdownHtml"
class="view-body"
id="viewBody"
ref="viewBody"
style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
></div>
</el-tab-pane>
<el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit">
<div class="lineH25 view-body" contenteditable id="md-editor" @blur="emitMarkDown" v-html="markdown"></div>
<el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit" name="1">
<div
class="lineH25 view-body"
contenteditable
id="md-editor"
ref="mdEditor"
@blur="emitMarkDown"
v-html="markdown"
style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
></div>
</el-tab-pane>
</el-tabs>
</div>
@@ -28,7 +42,17 @@
</div>
</template>
<script>
import { getPdfUrl, minerUBbox, minerUMarkDown, minerUMarkDownUpdate, minerURetry, minerUQuery, imageRetry } from '@/api/generatedApi/index'
import {
getPdfUrl,
minerUBbox,
minerUMarkDown,
minerUMarkDownUpdate,
minerURetry,
minerUQuery,
imageRetry,
getMd_info,
mdIndex
} from '@/api/generatedApi/index'
import { DEFAULT_COLOR_SECTION, PDF_COLOR_PICKER } from './pdf-color'
import MarkdownIt from 'markdown-it'
import markdownItKatex from 'markdown-it-katex'
@@ -40,6 +64,8 @@ export default {
name: 'index',
data() {
return {
tab: '0',
mdPges: 0,
tableIdCounter: 0,
finishedMiner: false,
prdUrl: ``,
@@ -59,7 +85,6 @@ export default {
icon: 'el-icon-view',
name: 'retry',
click: tableElement => {
console.log('重新识别')
// 获取的 识别图片
this.selectionImagePath = ''
let chooseItem = this.findMatchingTable(tableElement)
@@ -159,16 +184,38 @@ export default {
if (newVal) {
this.getMinerUStatus()
this.prdUrl = getPdfUrl({ documentId: newVal })
console.log('this.prdUrl')
}
},
immediate: true
},
page: {
handler(newVal, oldVal) {
if (newVal) {
this.changePage(newVal, this.tab)
}
}
}
},
components: {},
filters: {},
methods: {
//
//changePage
changePage(page) {
let documentId = document.getElementById(`view-code-${page - 1}`)
let viewBody = document.getElementById('viewBody')
if (this.tab === '1') {
documentId = document.getElementById(`ebiz-code-${page - 1}`)
viewBody = document.getElementById('md-editor')
}
if (documentId) {
viewBody.scrollTo({
top: documentId.offsetTop - 16,
behavior: 'smooth'
})
}
},
//重新识别
retryMinerImage(chooseItem, loading, tableElement) {
imageRetry({
documentId: this.documentId,
@@ -316,7 +363,6 @@ export default {
linesMap(table) {
;(table.blocks ? table.blocks : []).map(lines => {
console.log(lines)
lines.lines.map(spans => {
spans.spans.map(span => {
this.selectionTable.push({ html: span.html, image_path: span.image_path })
@@ -350,7 +396,10 @@ export default {
this.$emit('getMarkDownIt', { innerText: pre })
},
saveMarkDown() {
let pre = document.getElementById('md-editor').innerText
let pre = document.getElementById('md-editor').innerHTML
// pre + ebiz-code标签
minerUMarkDownUpdate({
documentId: this.documentId,
newMd: pre
@@ -395,32 +444,77 @@ export default {
this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content)))
this.setTableSelection(JSON.parse(JSON.stringify(res.content.content)))
console.log(this.selectionTable, 'this.selectionTable')
// this.$refs.iframe 重新刷新iframe
this.$refs.iframe.contentWindow.location.reload()
this.getPDFDetailMarkDown()
this.getMdPage()
})
},
changeTab() {
let pre = document.getElementById('md-editor').innerHTML
getMdPage() {
let responseText = ''
getMd_info({ documentId: this.documentId }).then(async res => {
if (res) {
this.mdPges = res.content.content.indexList
for (let i = 0; i < this.mdPges.length; i++) {
let text = await mdIndex({ index: i, documentId: this.documentId })
responseText += `<ebiz-code id='ebiz-code-${i}'></ebiz-code>
${text}`
}
this.getPDFDetailMarkDown(responseText)
}
})
},
changeTab(evt) {
let editor = document.getElementById('md-editor')
// pre 获取 table的html 给table 增加 对照表的path id
let pre = editor.innerHTML
let tables = editor.querySelectorAll('table')
if (tables) {
tables.forEach(item => {
let pathId = item.getAttribute('data-path-id')
if (!pathId) {
let ite = this.findMatchingTable(item)
if (ite) {
item.setAttribute('data-path-id', ite.image_path.replace(/\.[^/.]+$/, ''))
item.setAttribute('data-path-type', ite.image_path.match(/\.[^/.]+$/)[0])
}
}
})
}
// pre = JSON.stringify(pre)
// let copyMdHtml = md.render(pre)
// 给 copyMdHtml 里面的table 增加 class m-view
// copyMdHtml = copyMdHtml.re
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, ''))
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
setTimeout(() => {
this.changePage(this.page, evt)
}, 1000)
},
// 初始md 文档
async getPDFDetailMarkDown() {
async getPDFDetailMarkDown(responseText) {
// responseText 判断是否包含ebiz-code
const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
this.markdown = await response.text()
// this.markdown 包含 ebiz-code
if (this.markdown.indexOf('<ebiz-code ') < 0) {
this.markdown = responseText
}
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, ''))
let text = this.markdown
this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
},
// 向 iframe 发送消息
sendMessageToIframe(type, message) {