DLTech21 / ofd.js

OFD板式文件html渲染方案及组件
Apache License 2.0
227 stars 174 forks source link

vue3 使用 ofd.js,提示 e.once is not a function #115

Open 1539744211 opened 2 months ago

1539744211 commented 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)
DLTech21 commented 2 months ago

https://github.com/DLTech21/ofd-vue3-demo