Feature:将导出pdf功能提取为一个单独的插件

2026-02-17 22:08:25 +08:00 · 2023-06-11 10:41:53 +08:00
parent 6d0682e821
commit 360eca620e
10 changed files with 83 additions and 29 deletions
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -2,6 +2,7 @@ import MindMap from './index'
 import MiniMap from './src/plugins/MiniMap.js'
 import Watermark from './src/plugins/Watermark.js'
 import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
+import ExportPDF from './src/plugins/ExportPDF.js'
 import Export from './src/plugins/Export.js'
 import Drag from './src/plugins/Drag.js'
 import Select from './src/plugins/Select.js'
@@ -20,6 +21,7 @@ MindMap
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
+  .usePlugin(ExportPDF)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)
--- a/simple-mind-map/src/plugins/Export.js
+++ b/simple-mind-map/src/plugins/Export.js
@@ -1,9 +1,7 @@
 import { imgToDataUrl, downloadFile, readBlob } from '../utils'
-import JsPDF from 'jspdf'
 import { SVG } from '@svgdotjs/svg.js'
 import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
 import { transformToMarkdown } from '../parse/toMarkdown'
-const URL = window.URL || window.webkitURL || window

 //  导出类
 class Export {
@@ -175,34 +173,11 @@ class Export {

  //  导出为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)
+    if (!this.mindMap.doExportPDF) {
+      throw new Error('请注册ExportPDF插件')
    }
-    image.src = img
+    let img = await this.png()
+    this.mindMap.doExportPDF.pdf(name, img)
  }

  //  导出为svg
--- a/simple-mind-map/src/plugins/ExportPDF.js
+++ b/simple-mind-map/src/plugins/ExportPDF.js
@@ -0,0 +1,44 @@
+import JsPDF from 'jspdf'
+
+//  导出PDF类，需要通过Export插件使用
+class ExportPDF {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  //  导出为pdf
+  pdf(name, img) {
+    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
+  }
+}
+
+ExportPDF.instanceName = 'doExportPDF'
+
+export default ExportPDF
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -74,6 +74,13 @@ Exports as `svg`.

 Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download.

+> After v0.6.0, an additional ExportPDF plugin needs to be registered
+
+```js
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+MindMap.usePlugin(ExportPDF)
+```
+
 ### json(name, withConfig)

 `name`：It is temporarily useless, just pass an empty string
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -63,6 +63,12 @@ a.click()
 </blockquote>
 <p><code>name</code>：File name</p>
 <p>Export as <code>pdf</code>. Unlike other export methods, this method does not return data and directly triggers the download.</p>
+<blockquote>
+<p>After v0.6.0, an additional ExportPDF plugin needs to be registered</p>
+</blockquote>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> ExportPDF <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/ExportPDF.js&#x27;</span>
+MindMap.usePlugin(ExportPDF)
+</code></pre>
 <h3>json(name, withConfig)</h3>
 <p><code>name</code>：It is temporarily useless, just pass an empty string</p>
 <p><code>withConfig``：Boolean</code>, default <code>true</code>, Whether the data contains configuration, otherwise it is pure mind map node data</p>
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -60,6 +60,8 @@ mindMap.export('png', true, '文件名')
 mindMap.export('pdf', true, '文件名')
 ```

+> 从v0.6.0+，要导出pdf，需要额外注册一个ExportPDF插件。
+
 ### 导出为svg

 导出为`svg`可以传递的参数如下：
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -38,6 +38,9 @@ mindMap.export(<span class="hljs-string">&#x27;json&#x27;</span>, <span class="h
 <pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;png&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
 mindMap.export(<span class="hljs-string">&#x27;pdf&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
 </code></pre>
+<blockquote>
+<p>从v0.6.0+，要导出pdf，需要额外注册一个ExportPDF插件。</p>
+</blockquote>
 <h3>导出为svg</h3>
 <p>导出为<code>svg</code>可以传递的参数如下：</p>
 <pre class="hljs"><code>mindMap.export(type, isDownload, fileName, plusCssText = <span class="hljs-string">&#x27;&#x27;</span>)
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -74,6 +74,13 @@ svg(

 导出为`pdf`，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。

+> v0.6.0版本以后，需要额外注册一个ExportPDF插件
+
+```js
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+MindMap.usePlugin(ExportPDF)
+```
+
 ### json(name, withConfig)

 `name`：暂时没有用处，传空字符串即可
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -63,6 +63,12 @@ a.click()
 </blockquote>
 <p><code>name</code>：文件名称</p>
 <p>导出为<code>pdf</code>，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。</p>
+<blockquote>
+<p>v0.6.0版本以后，需要额外注册一个ExportPDF插件</p>
+</blockquote>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> ExportPDF <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/ExportPDF.js&#x27;</span>
+MindMap.usePlugin(ExportPDF)
+</code></pre>
 <h3>json(name, withConfig)</h3>
 <p><code>name</code>：暂时没有用处，传空字符串即可</p>
 <p><code>withConfig``：Boolean</code>, 默认为<code>true</code>，数据中是否包含配置，否则为纯思维导图节点数据</p>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -26,6 +26,7 @@ import MindMap from 'simple-mind-map'
 import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
 import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
 import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
 import Export from 'simple-mind-map/src/plugins/Export.js'
 import Drag from 'simple-mind-map/src/plugins/Drag.js'
 import Select from 'simple-mind-map/src/plugins/Select.js'
@@ -56,6 +57,7 @@ MindMap
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
+  .usePlugin(ExportPDF)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)