VUE docx-preview过程中会获取不到dom

80 阅读1分钟
<template>
  <div class="doc-render-box">
    <div ref="refFile"></div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'PreviewDemo'
})
</script>
<script setup>
import axios from 'axios'
const docxPromise = () => import('docx-preview')
const service = axios.create()
const props = defineProps({
  url: {
    type: String,
    default: ''
  }
})

const refFile = ref(null)

watch(
  () => props.url,
  (val) => {
    if (val) {
      goPreview()
    }
  }
)
const goPreview = async () => {
  const { data } = await service({
    url: props.url,
    method: 'get',
    responseType: 'blob'
  })
  //这个一定要存在这里,要不然会获取不到dom!!!
  const docx = await docxPromise()
  docx.renderAsync(data, refFile.value)
}
</script>
<style lang="scss" scoped>
.doc-render-box {
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
}
</style>