Cannot be used on the Vue3 project

[hybzhl]

Please help me Dalao! On the Vue3 project, I completed the dxf parsing work, but was unable to assign canvas to my Dom node; Error content: TypeError: save is null Finally, attach my Vue3 code

<template>
  <div id="ViewerCore" class="ViewerCore" ref="ViewerCoreRef">
    <!-- <a-spin class="ViewerCore_spin" :tip="progressText" size="large">
    </a-spin> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useProjectInfo } from '@/store/projectStore'
import { urlToFile } from '@/utils/Download/Download'
import * as three from 'three'
import { DxfViewer } from 'dxf-viewer'
import DxfViewerWorker from 'worker-loader!./DxfViewerWorker'  // eslint-disable-line 
import mainFont from '@/assets/Fonts/Roboto-LightItalic.ttf'
import aux1Font from '@/assets/Fonts/NotoSansDisplay-SemiCondensedLightItalic.ttf'
import aux2Font from '@/assets/Fonts/HanaMinA.ttf'
import aux3Font from '@/assets/Fonts/NanumGothic-Regular.ttf'
const projectStore = useProjectInfo()
storeToRefs(projectStore)
const ViewerCoreRef = ref(null)
const spinning = ref(false)
const instantDxfViewer = ref()
const curProgressPhase = ref('')
const progressText = ref('')
const Fonts = [mainFont, aux1Font, aux2Font, aux3Font]
const options = reactive(
  {
    clearColor: new three.Color('#212830'),
    autoResize: true,
    colorCorrection: true,
    sceneOptions: {
      wireframeMesh: true
    }
  }
)
// 获取文件blob链接
const getFileBlob = () => {
  spinning.value = true
  urlToFile(projectStore.DWGInfo.path, projectStore.DWGInfo.fileName).then(res => {
    const dxfUrl = URL.createObjectURL(res)
    loadDXF(dxfUrl)
  })
}
// 加载DXF文件
const loadDXF = async (dxfUrl) => {
  const fixFonts = []
  Fonts.forEach(element => {
    fixFonts.push('/' + element)
  })
  try {
    await instantDxfViewer.value.Load({
      url: dxfUrl,
      fonts: fixFonts,
      progressCbk: OnProgress.bind(),
      workerFactory: DxfViewerWorker
    })
  } catch (error) {
    console.warn(error)
  } finally {
    spinning.value = false
    progressText.value = ''
    curProgressPhase.value = ''
  }
}
// DXF加载进度
const OnProgress = (phase, size, totalSize) => {
  console.log('phase', phase)
  console.log('size', size)
  console.log('totalSize', totalSize)
  if (phase !== curProgressPhase.value) {
    switch (phase) {
      case 'font':
        progressText.value = '正在获取字体'
        break
      case 'fetch':
        progressText.value = '正在获取文件'
        break
      case 'parse':
        progressText.value = '文件转码中'
        break
      case 'prepare':
        progressText.value = '数据渲染中'
        break
    }
    curProgressPhase.value = phase
  }
}

onMounted(() => {
  instantDxfViewer.value = new DxfViewer(ViewerCoreRef.value, options)
  setTimeout(() => {
    getFileBlob()
  }, 200)
})
defineExpose({ getFileBlob })
</script>

<style lang="stylus">
  .ViewerCore
    height: 100%
    width: 100%
    .ViewerCore_spin
      height: 100%
      width 100%
      display: absolute
      .ant-spin-dot
        margin-top: 16%
</style>

[vagran]

It is quite difficult to identify the cause by that information. It should not be Vue3-specific. Does the file, you are trying to load, is displayed properly on the demo page?

[sdsoldi]

you need to not ref instantDxfViewer Create a 'var' variable

var instantDxfViewer = null; instantDxfViewer = ew DxfViewer(ref, DxfViewerOptions);