|
|
@@ -7,11 +7,16 @@
|
|
|
<p :style="{'color': previewUrl ? '#2d8cf0' : ''}">名片</p>
|
|
|
<el-image v-if="previewUrl" width="100%" :preview-src-list="[previewUrl]" class="cursor-pointer" :src="previewUrl" />
|
|
|
</div>
|
|
|
- <p class="mb-3" :class="{'mt-3': !previewUrl}">门墩儿新任命</p>
|
|
|
<p>门墩儿用户简历</p>
|
|
|
<div>
|
|
|
- <p :style="{'color': markdown_text ? '#2d8cf0' : ''}">网页</p>
|
|
|
- <div v-if="markdown_text" v-html="markdown_text" class="markdownContent"></div>
|
|
|
+ <p :style="{'color': markdown_text ? '#2d8cf0' : ''}">门墩儿新任命</p>
|
|
|
+ <iframe
|
|
|
+ v-if="markdown_text"
|
|
|
+ id="Iframe"
|
|
|
+ class="markdownContent"
|
|
|
+ src=""
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -131,6 +136,122 @@ const getTalentTagById = async() => {
|
|
|
}) : []
|
|
|
}
|
|
|
|
|
|
+// 存储observer引用，用于销毁
|
|
|
+let currentObserver = null
|
|
|
+
|
|
|
+// 查看原网页
|
|
|
+const showPage = (html) => {
|
|
|
+ // 预处理HTML内容
|
|
|
+ html = html.replace(/data-src/g, 'src') // 将 data-src 转化为 src
|
|
|
+ .replace(/https/g, 'http') // 将HTML内容中所有的https替换为http
|
|
|
+
|
|
|
+ // 创建完整的HTML文档，包含强制图片样式的CSS
|
|
|
+ const fullHtml = `
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="referrer" content="never">
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ height: auto !important;
|
|
|
+ object-fit: contain !important;
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ ${html}
|
|
|
+ </body>
|
|
|
+ </html>
|
|
|
+ `
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ const iframe = document.getElementById('Iframe')
|
|
|
+ if (!iframe) return
|
|
|
+
|
|
|
+ // 销毁之前的observer
|
|
|
+ if (currentObserver) {
|
|
|
+ currentObserver.disconnect()
|
|
|
+ currentObserver = null
|
|
|
+ }
|
|
|
+
|
|
|
+ const doc = iframe.contentDocument || iframe.document
|
|
|
+ doc.open()
|
|
|
+ doc.write(fullHtml)
|
|
|
+ doc.close()
|
|
|
+
|
|
|
+ // 等待内容加载完成后进一步处理
|
|
|
+ setTimeout(() => {
|
|
|
+ // 确保js_content可见
|
|
|
+ const jsContent = doc.getElementById('js_content')
|
|
|
+ if (jsContent) {
|
|
|
+ jsContent.style.visibility = 'visible'
|
|
|
+ jsContent.style.opacity = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ // 强制重新设置所有图片样式
|
|
|
+ const images = doc.querySelectorAll('img')
|
|
|
+ images.forEach(img => {
|
|
|
+ img.style.setProperty('width', '100%', 'important')
|
|
|
+ img.style.setProperty('max-width', '100%', 'important')
|
|
|
+ img.style.setProperty('height', 'auto', 'important')
|
|
|
+ img.style.setProperty('object-fit', 'contain', 'important')
|
|
|
+ img.style.setProperty('display', 'block', 'important')
|
|
|
+ img.removeAttribute('width')
|
|
|
+ img.removeAttribute('height')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 设置所有容器
|
|
|
+ const containers = doc.querySelectorAll('div, section, article, p')
|
|
|
+ containers.forEach(container => {
|
|
|
+ container.style.setProperty('width', '100%', 'important')
|
|
|
+ container.style.setProperty('max-width', '100%', 'important')
|
|
|
+ container.style.setProperty('overflow', 'hidden', 'important')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建新的observer并保存引用
|
|
|
+ currentObserver = new MutationObserver((mutations) => {
|
|
|
+ mutations.forEach((mutation) => {
|
|
|
+ mutation.addedNodes.forEach((node) => {
|
|
|
+ if (node.nodeType === 1) {
|
|
|
+ const newImages = node.querySelectorAll ? node.querySelectorAll('img') : []
|
|
|
+ if (node.tagName === 'IMG') newImages.push(node)
|
|
|
+
|
|
|
+ newImages.forEach(img => {
|
|
|
+ img.style.setProperty('width', '100%', 'important')
|
|
|
+ img.style.setProperty('max-width', '100%', 'important')
|
|
|
+ img.style.setProperty('height', 'auto', 'important')
|
|
|
+ img.style.setProperty('object-fit', 'contain', 'important')
|
|
|
+ img.style.setProperty('display', 'block', 'important')
|
|
|
+ img.removeAttribute('width')
|
|
|
+ img.removeAttribute('height')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ currentObserver.observe(doc.body, {
|
|
|
+ childList: true,
|
|
|
+ subtree: true
|
|
|
+ })
|
|
|
+ }, 200) // 增加延时确保内容完全加载
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
/** 打开弹窗 */
|
|
|
const markdown_text = ref(null)
|
|
|
const open = async (data) => {
|
|
|
@@ -153,6 +274,7 @@ const open = async (data) => {
|
|
|
const result = await talentLabelingApi.getTalentMarkdown(data.origin_source.minio_path)
|
|
|
if (result) {
|
|
|
markdown_text.value = marked(result)
|
|
|
+ if (markdown_text.value) showPage(markdown_text.value)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -215,6 +337,26 @@ const handleSave = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 清理函数，用于销毁observer
|
|
|
+const cleanup = () => {
|
|
|
+ if (currentObserver) {
|
|
|
+ currentObserver.disconnect()
|
|
|
+ currentObserver = null
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 监听弹窗关闭，清理observer
|
|
|
+watch(dialogVisible, (newVal) => {
|
|
|
+ if (!newVal) {
|
|
|
+ cleanup()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 组件卸载时清理
|
|
|
+onUnmounted(() => {
|
|
|
+ cleanup()
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -234,16 +376,8 @@ const handleSave = async () => {
|
|
|
width: 100%;
|
|
|
max-width: 100%;
|
|
|
height: 600px;
|
|
|
- overflow-y: auto;
|
|
|
- p {
|
|
|
- width: 100%;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ border: none;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
Xiao_123