Feat：导出pdf支持根据图片大小分页导出

simple-mind-map/src/plugins/Export.js

@@ -175,12 +175,12 @@ class Export {
   }
 
   //  导出为pdf
-  async pdf(name) {
+  async pdf(name, useMultiPageExport) {
     if (!this.mindMap.doExportPDF) {
       throw new Error('请注册ExportPDF插件')
     }
     let img = await this.png()
-    this.mindMap.doExportPDF.pdf(name, img)
+    this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport)
   }
 
   // 导出为xmind

simple-mind-map/src/plugins/ExportPDF.js

@@ -8,7 +8,16 @@ class ExportPDF {
   }
 
   //  导出为pdf
-  pdf(name, img) {
+  pdf(name, img, useMultiPageExport = false) {
+    if (useMultiPageExport) {
+      this.multiPageExport(name, img)
+    } else {
+      this.onePageExport(name, img)
+    }
+  }
+
+  // 单页导出
+  onePageExport(name, img) {
     let pdf = new JsPDF('', 'pt', 'a4')
     let a4Width = 595
     let a4Height = 841
@@ -37,6 +46,52 @@ class ExportPDF {
     }
     image.src = img
   }
+
+  // 多页导出
+  multiPageExport(name, img) {
+    let image = new Image()
+    const a4Width = 592.28
+    const a4Height = 841.89
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      // 一页pdf显示高度
+      let pageHeight = (imageWidth / a4Width) * a4Height
+      // 未生成pdf的高度
+      let leftHeight = imageHeight
+      // 偏移
+      let position = 0
+      // a4纸的尺寸[595.28,841.89]，图片在pdf中图片的宽高
+      let imgWidth = a4Width
+      let imgHeight = (a4Width / imageWidth) * imageHeight
+      let pdf = new JsPDF('', 'pt', 'a4')
+      // 有两个高度需要区分，一个是图片的实际高度，和生成pdf的页面高度(841.89)
+      // 当内容未超过pdf一页显示的范围，无需分页
+      if (leftHeight < pageHeight) {
+        pdf.addImage(
+          img,
+          'PNG',
+          (a4Width - imgWidth) / 2,
+          (a4Height - imgHeight) / 2,
+          imgWidth,
+          imgHeight
+        )
+      } else {
+        // 分页
+        while (leftHeight > 0) {
+          pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight)
+          leftHeight -= pageHeight
+          position -= a4Height
+          // 避免添加空白页
+          if (leftHeight > 0) {
+            pdf.addPage()
+          }
+        }
+      }
+      pdf.save(name)
+    }
+    image.src = img
+  }
 }
 
 ExportPDF.instanceName = 'doExportPDF'

web/src/lang/en_us.js

@@ -108,7 +108,8 @@ export default {
     notifyTitle: 'Info',
     notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser',
     paddingX: 'Padding x',
-    paddingY: 'Padding y'
+    paddingY: 'Padding y',
+    useMultiPageExport: 'Export multi page'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',

web/src/lang/zh_cn.js

@@ -108,7 +108,8 @@ export default {
     notifyTitle: '消息',
     notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
     paddingX: '水平内边距',
-    paddingY: '垂直内边距'
+    paddingY: '垂直内边距',
+    useMultiPageExport: '是否多页导出'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',

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

@@ -53,6 +53,12 @@
           style="margin-left: 12px"
           >{{ $t('export.isTransparent') }}</el-checkbox
         >
+        <el-checkbox
+          v-show="['pdf'].includes(exportType)"
+          v-model="useMultiPageExport"
+          style="margin-left: 12px"
+          >{{ $t('export.useMultiPageExport') }}</el-checkbox
+        >
       </div>
       <div class="downloadTypeList">
         <div
@@ -101,7 +107,8 @@ export default {
       loading: false,
       loadingText: '',
       paddingX: 10,
-      paddingY: 10
+      paddingY: 10,
+      useMultiPageExport: false
     }
   },
   computed: {
@@ -175,6 +182,8 @@ export default {
           this.fileName,
           this.isTransparent
         )
+      } else if (this.exportType === 'pdf') {
+        this.$bus.$emit('export', this.exportType, true, this.fileName, this.useMultiPageExport)
       } else {
         this.$bus.$emit('export', this.exportType, true, this.fileName)
       }