支持导出为pdf

README.md

@@ -295,7 +295,7 @@ v0.1.7+。切换模式为只读或编辑。
 
 导出
 
-`type`：要导出的类型，可选值：png、svg
+`type`：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）
 
 `isDownload`：是否需要直接触发下载，布尔值，默认为`false`
 

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",

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 

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>