Demo:导出图片支持选择格式

web/src/lang/en_us.js

@@ -172,7 +172,8 @@ export default {
     addFooterText: 'Add text at the footer',
     desc: 'Desc',
     options: 'Options',
-    isFitBg: 'Whether to display the complete background image (effective when a background image is used)'
+    isFitBg: 'Whether to display the complete background image (effective when a background image is used)',
+    format: 'Format'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',

web/src/lang/zh_cn.js

@@ -167,7 +167,8 @@ export default {
     addFooterTextPlaceholder: '比如：来自simple-mind-map',
     desc: '说明',
     options: '选项',
-    isFitBg: '是否显示完整背景图片（使用了背景图片时生效）'
+    isFitBg: '是否显示完整背景图片（使用了背景图片时生效）',
+    format: '格式'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',

web/src/lang/zh_tw.js

@@ -168,7 +168,8 @@ export default {
     addFooterTextPlaceholder: '例如：來自 simple-mind-map',
     desc: '說明',
     options: '選項',
-    isFitBg: '是否顯示完整背景圖片（使用了背景圖片時生效）'
+    isFitBg: '是否顯示完整背景圖片（使用了背景圖片時生效）',
+    format: '格式'
   },
   fullscreen: {
     fullscreenShow: '全螢幕檢視',

web/src/pages/Edit/components/Export.vue

@@ -61,6 +61,13 @@
                 class="valueItem"
                 v-show="['svg', 'png', 'pdf'].includes(exportType)"
               >
+                <div class="valueSubItem" v-if="['png'].includes(exportType)">
+                  <span class="name">{{ $t('export.format') }}</span>
+                  <el-radio-group v-model="imageFormat">
+                    <el-radio label="png">PNG</el-radio>
+                    <el-radio label="jpg">JPG</el-radio>
+                  </el-radio-group>
+                </div>
                 <div class="valueSubItem">
                   <span class="name">{{ $t('export.paddingX') }}</span>
                   <el-input
@@ -142,7 +149,8 @@ export default {
       paddingY: 10,
       extraText: '',
       isMobile: isMobile(),
-      isFitBg: true
+      isFitBg: true,
+      imageFormat: 'png'
     }
   },
   computed: {
@@ -227,7 +235,7 @@ export default {
       } else if (this.exportType === 'png') {
         this.$bus.$emit(
           'export',
-          this.exportType,
+          this.imageFormat,
           true,
           this.fileName,
           this.isTransparent,
@@ -525,6 +533,7 @@ export default {
             .valueItem {
               .valueSubItem {
                 margin-bottom: 12px;
+                display: flex;
 
                 &:last-of-type {
                   margin-right: 0;
@@ -532,6 +541,7 @@ export default {
 
                 .name {
                   margin-right: 12px;
+                  width: 100px;
                 }
               }
             }