Open 1539744211 opened 2 months ago
"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>``` ![image](https://github.com/DLTech21/ofd.js/assets/22765727/b9d76409-ac7a-4856-88cd-a03035d33d31)
https://github.com/DLTech21/ofd-vue3-demo
"ofd.js": "^1.3.38", "vue": "^3.2.37",