Demo：支持打印大纲

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1737722825571') format('woff2'),
+  src: url('iconfont.woff2?t=1739152990179') format('woff2'),
-       url('iconfont.woff?t=1737722825571') format('woff'),
+       url('iconfont.woff?t=1739152990179') format('woff'),
-       url('iconfont.ttf?t=1737722825571') format('truetype');
+       url('iconfont.ttf?t=1739152990179') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconprinting:before {
+  content: "\ea28";
+}
+
+.iconwenjianjia:before {
+  content: "\e614";
+}
+
 .iconcontentleft:before {
   content: "\e8c9";
 }

web/src/lang/en_us.js

@@ -217,7 +217,9 @@ export default {
   },
   outline: {
     title: 'Outline',
-    nodeDefaultText: 'Branch node'
+    nodeDefaultText: 'Branch node',
+    print: 'Print',
+    fullscreen: 'Fullscreen'
   },
   scale: {
     zoomIn: 'Zoom in',

web/src/lang/zh_cn.js

@@ -213,7 +213,9 @@ export default {
   },
   outline: {
     title: '大纲',
-    nodeDefaultText: '分支节点'
+    nodeDefaultText: '分支节点',
+    print: '打印',
+    fullscreen: '全屏'
   },
   scale: {
     zoomIn: '放大',

web/src/lang/zh_tw.js

@@ -78,7 +78,8 @@ export default {
     belowNode: '顯示在節點下方',
     confirm: '確定',
     cancel: '取消',
-    changeRichTextTip: '該操作會清空所有曆史修改記錄，並且修改思維導圖數據，是否繼續？',
+    changeRichTextTip:
+      '該操作會清空所有曆史修改記錄，並且修改思維導圖數據，是否繼續？',
     changeRichTextTip2: '是否切換爲富文本模式？',
     changeRichTextTip3: '是否切換爲非富文本模式？',
     enableDragImport: '是否允許直接拖拽文件到頁面進行導入',
@@ -214,7 +215,9 @@ export default {
   },
   outline: {
     title: '大綱',
-    nodeDefaultText: '分支節點'
+    nodeDefaultText: '分支節點',
+    print: '打印',
+    fullscreen: '全屏'
   },
   scale: {
     zoomIn: '放大',
@@ -268,7 +271,7 @@ export default {
     bottom: '下',
     left: '左',
     right: '右',
-    tag: '標簽',
+    tag: '標簽'
   },
   theme: {
     title: '主題',

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

@@ -5,10 +5,26 @@
     ref="outlineEditContainer"
     v-if="isOutlineEdit"
   >
-    <div class="closeBtn" @click="onClose">
+    <div class="btnList">
-      <span class="icon iconfont iconguanbi"></span>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t('outline.print')"
+        placement="top"
+      >
+        <div class="btn" @click="onPrint">
+          <span class="icon iconfont iconprinting"></span>
+        </div>
+      </el-tooltip>
+      <div class="btn" @click="onClose">
+        <span class="icon iconfont iconguanbi"></span>
+      </div>
     </div>
-    <div class="outlineEditBox" ref="outlineEditBox">
+    <div
+      class="outlineEditBox"
+      id="fullScreenOutlineEditBox"
+      ref="outlineEditBox"
+    >
       <div class="outlineEdit">
         <el-tree
           ref="tree"
@@ -58,6 +74,7 @@ import {
   handleInputPasteText
 } from 'simple-mind-map/src/utils'
 import { storeData } from '@/api'
+import { printOutline } from '@/utils'
 
 // 大纲侧边栏
 export default {
@@ -225,6 +242,11 @@ export default {
       return Math.random()
     },
 
+    // 打印
+    onPrint() {
+      printOutline(this.$refs.outlineEditBox)
+    },
+
     // 关闭
     onClose() {
       this.setIsOutlineEdit(false)
@@ -274,28 +296,36 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 9999;
+  z-index: 1999;
   background-color: #fff;
   overflow: hidden;
 
   &.isDark {
     background-color: #262a2e;
 
-    .closeBtn {
+    .btnList {
-      .icon {
+      .btn {
-        color: #fff;
+        .icon {
+          color: #fff;
+        }
       }
     }
   }
 
-  .closeBtn {
+  .btnList {
     position: absolute;
     right: 40px;
     top: 20px;
-    cursor: pointer;
+    display: flex;
+    align-items: center;
 
-    .icon {
+    .btn {
-      font-size: 28px;
+      cursor: pointer;
+      margin-left: 12px;
+
+      .icon {
+        font-size: 28px;
+      }
     }
   }
 

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

@@ -1,16 +1,36 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('outline.title')">
-    <div
+    <div class="btnList">
-      class="changeBtn"
+      <el-tooltip
-      :class="{ isDark: isDark }"
+        class="item"
-      @click="onChangeToOutlineEdit"
+        effect="dark"
-    >
+        :content="$t('outline.print')"
-      <span class="icon iconfont iconquanping1"></span>
+        placement="top"
+      >
+        <div class="btn" @click="onPrint">
+          <span class="icon iconfont iconprinting"></span>
+        </div>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t('outline.fullscreen')"
+        placement="top"
+      >
+        <div
+          class="btn"
+          :class="{ isDark: isDark }"
+          @click="onChangeToOutlineEdit"
+        >
+          <span class="icon iconfont iconquanping1"></span>
+        </div>
+      </el-tooltip>
     </div>
     <Outline
       :mindMap="mindMap"
       v-if="activeSidebar === 'outline'"
       @scrollTo="onScrollTo"
+      ref="outlineRef"
     ></Outline>
   </Sidebar>
 </template>
@@ -19,6 +39,7 @@
 import Sidebar from './Sidebar'
 import { mapState, mapMutations } from 'vuex'
 import Outline from './Outline.vue'
+import { printOutline } from '@/utils'
 
 // 大纲侧边栏
 export default {
@@ -62,20 +83,31 @@ export default {
       if (y > top + height) {
         container.scrollTo(0, y - height / 2)
       }
+    },
+
+    // 打印
+    onPrint() {
+      printOutline(this.$refs.outlineRef.$el)
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.changeBtn {
+.btnList {
   position: absolute;
   right: 50px;
   top: 12px;
-  cursor: pointer;
+  display: flex;
+  align-items: center;
 
-  &.isDark {
+  .btn {
-    color: #fff;
+    cursor: pointer;
+    margin-left: 12px;
+
+    &.isDark {
+      color: #fff;
+    }
   }
 }
 </style>

web/src/utils/index.js

@@ -74,3 +74,25 @@ export const setImgToClipboard = img => {
     navigator.clipboard.write(data)
   }
 }
+
+// 打印大纲
+export const printOutline = el => {
+  const printContent = el.outerHTML
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;')
+  document.body.appendChild(iframe)
+  const iframeDoc = iframe.contentWindow.document
+  // 将当前页面的所有样式添加到iframe中
+  const styleList = document.querySelectorAll('style')
+  Array.from(styleList).forEach(el => {
+    iframeDoc.write(el.outerHTML)
+  })
+  // 设置打印展示方式 - 纵向展示
+  iframeDoc.write('<style media="print">@page {size: portrait;}</style>')
+  // 写入内容
+  iframeDoc.write('<div>' + printContent + '</div>')
+  setTimeout(function() {
+    iframe.contentWindow?.print()
+    document.body.removeChild(iframe)
+  }, 500)
+}