-
-
Notifications
You must be signed in to change notification settings - Fork 189
Open
Description
"ofd.js": "^1.3.38",
"vue": "^3.2.37",
<div class="view-ofd display-flex justify-center">
<div class="ofds display-flex"></div>
</div>
</template>
<script lang="ts" setup>
import { PropType, reactive, watch, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { parseOfdDocument, renderOfd } from 'ofd.js'
import { CommonType } from '@/interface'
const props = defineProps({
file: {
type: Object as PropType<CommonType>,
default: () => ({})
}
})
const emits = defineEmits(['close'])
const state = reactive<{
bouncedStatus: boolean
curHtml: HTMLElement | null
}>({
bouncedStatus: false,
curHtml: null
})
const closeBounced = () => {
state.curHtml && (state.curHtml.innerHTML = '')
state.bouncedStatus = false
emits('close')
}
onMounted(() => {
state.curHtml = document.querySelector('.ofds')
})
const previewOfd = (file: CommonType) => {
const url = file.url && file.url.includes('http') ? file.url : file.raw || file
parseOfdDocument({
ofd: url,
success: (res: CommonType) => {
console.log(res)
const ofdObj = res[0]
const divs = renderOfd(1000, ofdObj)
nextTick(() => {
divs.forEach((d: HTMLElement) => {
state.curHtml && state.curHtml.appendChild(d)
})
})
},
fail: () => {
message.error('预览文件失败,请重试!')
closeBounced()
}
})
}
watch(
() => props.file,
(file) => {
console.log(file)
if (file && (file.url || file.raw || toString.call(file) === '[object File]')) {
state.bouncedStatus = true
previewOfd(file)
}
}
)
</script>```

Metadata
Metadata
Assignees
Labels
No labels