fix: 图表元素导出图片后显示异常（#98）

src/hooks/useExport.ts

@@ -16,7 +16,6 @@ import { message } from 'ant-design-vue'
 interface ExportImageConfig {
   quality: number;
   width: number;
-  filter: (node: HTMLElement) => boolean;
   fontEmbedCSS?: string;
 }
 
@@ -30,18 +29,13 @@ export default () => {
     exporting.value = true
     const toImage = format === 'png' ? toPng : toJpeg
 
+    const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
+    foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
+
     setTimeout(() => {
-      if (!domRef) return
-
-      const filter = (node: HTMLElement) => {
-        if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
-        return true
-      }
-
       const config: ExportImageConfig = {
         quality,
         width: 1600,
-        filter,
       }
 
       if (ignoreWebfont) config.fontEmbedCSS = ''

src/views/components/element/ChartElement/BaseChartElement.vue

@@ -40,8 +40,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, inject, PropType, ref } from 'vue'
 import { PPTChartElement } from '@/types/slides'
+import { injectKeySlideScale } from '@/types/injectKey'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import Chart from './Chart.vue'
@@ -57,15 +58,18 @@ export default defineComponent({
       type: Object as PropType<PPTChartElement>,
       required: true,
     },
-    needScaleSize: {
-      type: Boolean,
-      default: true,
-    },
   },
   setup(props) {
+    const slideScale = inject(injectKeySlideScale) || ref(1)
+
+    const needScaleSize = computed(() => slideScale.value < 1)
+    const chartWidth = computed(() => needScaleSize.value ? props.elementInfo.width * 10 : props.elementInfo.width)
+    const chartHeight = computed(() => needScaleSize.value ? props.elementInfo.height * 10 : props.elementInfo.height)
+
     return {
-      chartWidth: computed(() => props.needScaleSize ? props.elementInfo.width * 10 : props.elementInfo.width),
-      chartHeight: computed(() => props.needScaleSize ? props.elementInfo.height * 10 : props.elementInfo.height),
+      needScaleSize,
+      chartWidth,
+      chartHeight,
     }
   },
 })

src/views/components/element/ChartElement/ScreenChartElement.vue

@@ -1,9 +1,5 @@
 <template>
-  <BaseChartElement
-    class="screen-element-chart"
-    :elementInfo="elementInfo"
-    :needScaleSize="false"
-  />
+  <BaseChartElement class="screen-element-chart" :elementInfo="elementInfo" />
 </template>
 
 <script lang="ts">