Demo：导出png、pdf、svg支持设置底部自定义文字

web/src/lang/en_us.js

@@ -130,7 +130,9 @@ export default {
     paddingX: 'Padding x',
     paddingY: 'Padding y',
     useMultiPageExport: 'Export multi page',
-    defaultFileName: 'Mind map'
+    defaultFileName: 'Mind map',
+    addFooterTextPlaceholder: 'For example: From simple-mind-map',
+    addFooterText: 'Add text at the footer'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',
@@ -278,7 +280,8 @@ export default {
     splitByWrap: 'Is automatically split nodes based on line breaks?',
     tip: 'Tip',
     yes: 'Yes',
-    no: 'No'
+    no: 'No',
+    exportError: 'Export failed'
   },
   mouseAction: {
     tip1:

web/src/lang/zh_cn.js

@@ -128,7 +128,9 @@ export default {
     paddingX: '水平内边距',
     paddingY: '垂直内边距',
     useMultiPageExport: '是否多页导出',
-    defaultFileName: '思维导图'
+    defaultFileName: '思维导图',
+    addFooterText: '底部添加文字',
+    addFooterTextPlaceholder: '比如：来自simple-mind-map'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',
@@ -274,7 +276,8 @@ export default {
     splitByWrap: '是否按换行自动分割节点？',
     tip: '提示',
     yes: '是',
-    no: '否'
+    no: '否',
+    exportError: '导出失败'
   },
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',

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

@@ -156,7 +156,8 @@ export default {
       useLeftKeySelectionRightKeyDrag: state =>
         state.localConfig.useLeftKeySelectionRightKeyDrag,
       isUseHandDrawnLikeStyle: state =>
-        state.localConfig.isUseHandDrawnLikeStyle
+        state.localConfig.isUseHandDrawnLikeStyle,
+      extraTextOnExport: state => state.extraTextOnExport
     })
   },
   watch: {
@@ -348,12 +349,55 @@ export default {
           console.error(err)
           switch (code) {
             case 'export_error':
-              this.$message.error('导出失败')
+              this.$message.error(this.$t('edit.exportError'))
               break
             default:
               break
           }
+        },
+        addContentToFooter: () => {
+          const text = this.extraTextOnExport.trim()
+          if (!text) return null
+          const el = document.createElement('div')
+          el.className = 'footer'
+          el.innerHTML = text
+          const cssText = `
+            .footer {
+              width: 100%;
+              height: 30px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 12px;
+              color: #979797;
+            }
+          `
+          return {
+            el,
+            cssText,
+            height: 30
+          }
         }
+        // addContentToHeader: () => {
+        //   const el = document.createElement('div')
+        //   el.className = 'footer'
+        //   el.innerHTML = '理想青年实验室'
+        //   const cssText = `
+        //     .header {
+        //       width: 100%;
+        //       height: 50px;
+        //       background: #f5f5f5;
+        //       display: flex;
+        //       justify-content: center;
+        //       align-items: center
+        //     }
+        //   `
+        //   return {
+        //     el,
+        //     cssText,
+        //     height: 50
+        //   }
+        // },
         // beforeShortcutRun: (key, activeNodeList) => {
         //   console.log(key, activeNodeList)
         //   // 阻止删除快捷键行为

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

@@ -50,6 +50,16 @@
             @keydown.native.stop
           ></el-input>
         </div>
+        <div class="paddingInputGroup">
+          <span class="name">{{ this.$t('export.addFooterText') }}</span>
+          <el-input
+            style="width: 200px"
+            v-model="extraText"
+            size="mini"
+            :placeholder="$t('export.addFooterTextPlaceholder')"
+            @keydown.native.stop
+          ></el-input>
+        </div>
         <div class="paddingInputGroup">
           <el-checkbox
             v-show="['png', 'pdf'].includes(exportType)"
@@ -85,7 +95,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 import { downTypeList } from '@/config'
 import { isMobile } from 'simple-mind-map/src/utils/index'
 
@@ -107,6 +117,7 @@ export default {
       loadingText: '',
       paddingX: 10,
       paddingY: 10,
+      extraText: '',
       isMobile: isMobile()
     }
   },
@@ -127,6 +138,8 @@ export default {
     this.$bus.$off('showExport', this.handleShowExport)
   },
   methods: {
+    ...mapMutations(['setExtraTextOnExport']),
+
     handleShowExport() {
       this.dialogVisible = true
     },
@@ -153,6 +166,7 @@ export default {
      * @Desc:  确定
      */
     confirm() {
+      this.setExtraTextOnExport(this.extraText)
       if (this.exportType === 'svg') {
         this.$bus.$emit(
           'export',

web/src/store.js

@@ -26,7 +26,8 @@ const store = new Vuex.Store({
     activeSidebar: '', // 当前显示的侧边栏
     isOutlineEdit: false, // 是否是大纲编辑模式
     isReadonly: false, // 是否只读
-    isSourceCodeEdit: false// 是否是源码编辑模式
+    isSourceCodeEdit: false, // 是否是源码编辑模式
+    extraTextOnExport: ''// 导出时底部添加的文字
   },
   mutations: {
     // 设置思维导图数据
@@ -67,6 +68,11 @@ const store = new Vuex.Store({
     setIsOutlineEdit(state, data) {
       state.isSourceCodeEdit = data
     },
+
+    // 设置导出时底部添加的文字
+    setExtraTextOnExport(state, data) {
+      state.extraTextOnExport = data
+    }
   },
   actions: {
     // 设置初始思维导图数据