From efe4aa0ec2294c54a98730c1d18a71ac51f2d2ee Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Wed, 16 Aug 2023 17:45:34 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E5=AF=BC=E5=87=BApdf=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=A0=B9=E6=8D=AE=E5=9B=BE=E7=89=87=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/plugins/Export.js    |  4 +-
 simple-mind-map/src/plugins/ExportPDF.js | 57 +++++++++++++++++++++++-
 web/src/lang/en_us.js                    |  3 +-
 web/src/lang/zh_cn.js                    |  3 +-
 web/src/pages/Edit/components/Export.vue | 11 ++++-
 5 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js
index 7820ac72..13bc95be 100644
--- a/simple-mind-map/src/plugins/Export.js
+++ b/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
diff --git a/simple-mind-map/src/plugins/ExportPDF.js b/simple-mind-map/src/plugins/ExportPDF.js
index e46b3a3c..27a81374 100644
--- a/simple-mind-map/src/plugins/ExportPDF.js
+++ b/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'
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index b7a8eb85..5302cea9 100644
--- a/web/src/lang/en_us.js
+++ b/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',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index f09ec097..dca9eb6e 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -108,7 +108,8 @@ export default {
     notifyTitle: '消息',
     notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
     paddingX: '水平内边距',
-    paddingY: '垂直内边距'
+    paddingY: '垂直内边距',
+    useMultiPageExport: '是否多页导出'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',
diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue
index 35f45957..06552be4 100644
--- a/web/src/pages/Edit/components/Export.vue
+++ b/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)
       }