From 861309d517c6215b56df3430c627879f835df771 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Mon, 8 Aug 2022 20:06:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AF=BC=E5=87=BA=E4=B8=BApd?=
 =?UTF-8?q?f?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  2 +-
 simple-mind-map/package.json             |  5 +--
 simple-mind-map/src/Export.js            | 42 ++++++++++++++++++++++--
 web/src/pages/Edit/components/Export.vue |  1 +
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 70b6cc55..97081663 100644
--- a/README.md
+++ b/README.md
@@ -295,7 +295,7 @@ v0.1.7+。切换模式为只读或编辑。
 
 导出
 
-`type`：要导出的类型，可选值：png、svg
+`type`：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）
 
 `isDownload`：是否需要直接触发下载，布尔值，默认为`false`
 
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 68579cd0..1716c441 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
@@ -24,7 +24,8 @@
     "@svgdotjs/svg.js": "^3.0.16",
     "canvg": "^3.0.7",
     "deepmerge": "^1.5.2",
-    "eventemitter3": "^4.0.7"
+    "eventemitter3": "^4.0.7",
+    "jspdf": "^2.5.1"
   },
   "keywords": [
     "javascript",
diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js
index 751b5441..f95629eb 100644
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,4 +1,5 @@
 import { imgToDataUrl, downloadFile } from './utils'
+import JsPDF from 'jspdf'
 const URL = window.URL || window.webkitURL || window
 
 /** 
@@ -24,8 +25,8 @@ class Export {
      */
     async export(type, isDownload = true, name = '思维导图') {
         if (this[type]) {
-            let result = await this[type]()
-            if (isDownload) {
+            let result = await this[type](name)
+            if (isDownload && type !== 'pdf') {
                 downloadFile(result, name + '.' + type)
             }
             return result
@@ -163,6 +164,43 @@ class Export {
         return imgDataUrl
     }
 
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-08 19:23:08 
+     * @Desc: 导出为pdf 
+     */
+    async pdf(name) {
+        let img = await this.png()
+        let pdf = new JsPDF('', 'pt', 'a4')
+        let a4Width = 595
+        let a4Height = 841
+        let a4Ratio = a4Width / a4Height
+        let image = new Image()
+        image.onload = () => {
+            let imageWidth = image.width
+            let imageHeight = image.height
+            let imageRatio = imageWidth / imageHeight
+            let w, h
+            if (imageWidth <= a4Width && imageHeight <= a4Height) {
+                // 使用图片原始宽高
+                w = imageWidth
+                h = imageHeight
+            } else if (a4Ratio > imageRatio) {
+                // 以a4Height为高度，缩放图片宽度
+                w = imageRatio * a4Height
+                h = a4Height
+            } else {
+                // 以a4Width为宽度，缩放图片高度
+                w = a4Width
+                h = a4Width / imageRatio
+            }
+            pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+            pdf.save(name)
+        }
+        image.src = img
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-07-04 15:32:07 
diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue
index 0264fa03..6f1629fd 100644
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -15,6 +15,7 @@
         <el-radio label="json">json文件（.json）</el-radio>
         <el-radio label="png">图片文件（.png）</el-radio>
         <el-radio label="svg">svg文件（.svg）</el-radio>
+        <el-radio label="pdf">pdf文件（.pdf）</el-radio>
       </el-radio-group>
       <div class="tip">tips：.smm文件可用于导入</div>
     </div>