feat(views): 预览时支持导出图片

src/views/Preview.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { ref, onMounted, watch, onUnmounted, getCurrentInstance } from 'vue';
 import localforage from 'localforage';
 import { localStorageName } from '@/services/utils';
 import { defaultFormat } from '@/services/defaults';
@@ -16,7 +16,10 @@ import { cdn, getLe5leV,getComponents } from '@/services/api';
 import { getDownloadList, getPayList,getFrameDownloadList, Frame} from '@/services/download';
 import { HvacDevicePen, IframeMsg } from '@/types';
 import { getVisual2DMsgType, Visual2DMsgType } from '.';
+import { MessagePlugin } from 'tdesign-vue-next';
 const route = useRoute();
+const { proxy } = getCurrentInstance();
+const $t = proxy.$t
 
 const meta2dDom = ref('');
 
@@ -76,7 +79,25 @@ const openHvacDevCtrlModal = ({ pen }: { pen: HvacDevicePen }) => {
 }
 
 const handleMsg = (e: MessageEvent<IframeMsg>) => {
-  // const { msgType } = e.data;
+  const { msgType, imgName } = e.data;
+  
+  if (msgType === getVisual2DMsgType(Visual2DMsgType.ExportImg)) {
+    downloadPng(imgName)
+  }
+};
+
+const downloadImageTips = $t('无法下载，宽度不合法，画布可能没有画笔/画布大小超出浏览器最大限制');
+
+const downloadPng = (name: string) => {
+  if (!meta2d.store.data.pens.length) {
+    MessagePlugin.warning(downloadImageTips);
+    return;
+  }
+  try {
+    meta2d.downloadPng(name);
+  } catch (e) {
+    MessagePlugin.warning(downloadImageTips);
+  }
 };
 
 const handlePreviewClick = () => {

src/views/index.ts

@@ -14,6 +14,7 @@ export const enum Visual2DMsgType {
   OpenDevCtrlModal = 'open-dev-ctrl-modal',
   PreviewLoaded = 'preview-loaded',
   PreviewClicked = 'preview-clicked',
+  ExportImg = 'export-img',
 }
 
 export const getVisual2DMsgType = (type: Visual2DMsgType) => {