Skip to content

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

Description

@1539744211

"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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions