Feature:将导出pdf功能提取为一个单独的插件
This commit is contained in:
parent
6d0682e821
commit
360eca620e
@ -2,6 +2,7 @@ import MindMap from './index'
|
|||||||
import MiniMap from './src/plugins/MiniMap.js'
|
import MiniMap from './src/plugins/MiniMap.js'
|
||||||
import Watermark from './src/plugins/Watermark.js'
|
import Watermark from './src/plugins/Watermark.js'
|
||||||
import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
|
import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
|
||||||
|
import ExportPDF from './src/plugins/ExportPDF.js'
|
||||||
import Export from './src/plugins/Export.js'
|
import Export from './src/plugins/Export.js'
|
||||||
import Drag from './src/plugins/Drag.js'
|
import Drag from './src/plugins/Drag.js'
|
||||||
import Select from './src/plugins/Select.js'
|
import Select from './src/plugins/Select.js'
|
||||||
@ -20,6 +21,7 @@ MindMap
|
|||||||
.usePlugin(Watermark)
|
.usePlugin(Watermark)
|
||||||
.usePlugin(Drag)
|
.usePlugin(Drag)
|
||||||
.usePlugin(KeyboardNavigation)
|
.usePlugin(KeyboardNavigation)
|
||||||
|
.usePlugin(ExportPDF)
|
||||||
.usePlugin(Export)
|
.usePlugin(Export)
|
||||||
.usePlugin(Select)
|
.usePlugin(Select)
|
||||||
.usePlugin(AssociativeLine)
|
.usePlugin(AssociativeLine)
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
import { imgToDataUrl, downloadFile, readBlob } from '../utils'
|
import { imgToDataUrl, downloadFile, readBlob } from '../utils'
|
||||||
import JsPDF from 'jspdf'
|
|
||||||
import { SVG } from '@svgdotjs/svg.js'
|
import { SVG } from '@svgdotjs/svg.js'
|
||||||
import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
|
import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
|
||||||
import { transformToMarkdown } from '../parse/toMarkdown'
|
import { transformToMarkdown } from '../parse/toMarkdown'
|
||||||
const URL = window.URL || window.webkitURL || window
|
|
||||||
|
|
||||||
// 导出类
|
// 导出类
|
||||||
class Export {
|
class Export {
|
||||||
@ -175,34 +173,11 @@ class Export {
|
|||||||
|
|
||||||
// 导出为pdf
|
// 导出为pdf
|
||||||
async pdf(name) {
|
async pdf(name) {
|
||||||
let img = await this.png()
|
if (!this.mindMap.doExportPDF) {
|
||||||
let pdf = new JsPDF('', 'pt', 'a4')
|
throw new Error('请注册ExportPDF插件')
|
||||||
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
|
let img = await this.png()
|
||||||
|
this.mindMap.doExportPDF.pdf(name, img)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导出为svg
|
// 导出为svg
|
||||||
|
|||||||
44
simple-mind-map/src/plugins/ExportPDF.js
Normal file
44
simple-mind-map/src/plugins/ExportPDF.js
Normal file
@ -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
|
||||||
@ -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.
|
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)
|
### json(name, withConfig)
|
||||||
|
|
||||||
`name`:It is temporarily useless, just pass an empty string
|
`name`:It is temporarily useless, just pass an empty string
|
||||||
|
|||||||
@ -63,6 +63,12 @@ a.click()
|
|||||||
</blockquote>
|
</blockquote>
|
||||||
<p><code>name</code>:File name</p>
|
<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>
|
<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">'simple-mind-map/src/plugins/ExportPDF.js'</span>
|
||||||
|
MindMap.usePlugin(ExportPDF)
|
||||||
|
</code></pre>
|
||||||
<h3>json(name, withConfig)</h3>
|
<h3>json(name, withConfig)</h3>
|
||||||
<p><code>name</code>:It is temporarily useless, just pass an empty string</p>
|
<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>
|
<p><code>withConfig``:Boolean</code>, default <code>true</code>, Whether the data contains configuration, otherwise it is pure mind map node data</p>
|
||||||
|
|||||||
@ -60,6 +60,8 @@ mindMap.export('png', true, '文件名')
|
|||||||
mindMap.export('pdf', true, '文件名')
|
mindMap.export('pdf', true, '文件名')
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> 从v0.6.0+,要导出pdf,需要额外注册一个ExportPDF插件。
|
||||||
|
|
||||||
### 导出为svg
|
### 导出为svg
|
||||||
|
|
||||||
导出为`svg`可以传递的参数如下:
|
导出为`svg`可以传递的参数如下:
|
||||||
|
|||||||
@ -38,6 +38,9 @@ mindMap.export(<span class="hljs-string">'json'</span>, <span class="h
|
|||||||
<pre class="hljs"><code>mindMap.export(<span class="hljs-string">'png'</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">'文件名'</span>)
|
<pre class="hljs"><code>mindMap.export(<span class="hljs-string">'png'</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">'文件名'</span>)
|
||||||
mindMap.export(<span class="hljs-string">'pdf'</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">'文件名'</span>)
|
mindMap.export(<span class="hljs-string">'pdf'</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">'文件名'</span>)
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>从v0.6.0+,要导出pdf,需要额外注册一个ExportPDF插件。</p>
|
||||||
|
</blockquote>
|
||||||
<h3>导出为svg</h3>
|
<h3>导出为svg</h3>
|
||||||
<p>导出为<code>svg</code>可以传递的参数如下:</p>
|
<p>导出为<code>svg</code>可以传递的参数如下:</p>
|
||||||
<pre class="hljs"><code>mindMap.export(type, isDownload, fileName, plusCssText = <span class="hljs-string">''</span>)
|
<pre class="hljs"><code>mindMap.export(type, isDownload, fileName, plusCssText = <span class="hljs-string">''</span>)
|
||||||
|
|||||||
@ -74,6 +74,13 @@ svg(
|
|||||||
|
|
||||||
导出为`pdf`,和其他导出方法不一样,这个方法不会返回数据,会直接触发下载。
|
导出为`pdf`,和其他导出方法不一样,这个方法不会返回数据,会直接触发下载。
|
||||||
|
|
||||||
|
> v0.6.0版本以后,需要额外注册一个ExportPDF插件
|
||||||
|
|
||||||
|
```js
|
||||||
|
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
|
||||||
|
MindMap.usePlugin(ExportPDF)
|
||||||
|
```
|
||||||
|
|
||||||
### json(name, withConfig)
|
### json(name, withConfig)
|
||||||
|
|
||||||
`name`:暂时没有用处,传空字符串即可
|
`name`:暂时没有用处,传空字符串即可
|
||||||
|
|||||||
@ -63,6 +63,12 @@ a.click()
|
|||||||
</blockquote>
|
</blockquote>
|
||||||
<p><code>name</code>:文件名称</p>
|
<p><code>name</code>:文件名称</p>
|
||||||
<p>导出为<code>pdf</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">'simple-mind-map/src/plugins/ExportPDF.js'</span>
|
||||||
|
MindMap.usePlugin(ExportPDF)
|
||||||
|
</code></pre>
|
||||||
<h3>json(name, withConfig)</h3>
|
<h3>json(name, withConfig)</h3>
|
||||||
<p><code>name</code>:暂时没有用处,传空字符串即可</p>
|
<p><code>name</code>:暂时没有用处,传空字符串即可</p>
|
||||||
<p><code>withConfig``:Boolean</code>, 默认为<code>true</code>,数据中是否包含配置,否则为纯思维导图节点数据</p>
|
<p><code>withConfig``:Boolean</code>, 默认为<code>true</code>,数据中是否包含配置,否则为纯思维导图节点数据</p>
|
||||||
|
|||||||
@ -26,6 +26,7 @@ import MindMap from 'simple-mind-map'
|
|||||||
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
|
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
|
||||||
import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
|
import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
|
||||||
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.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 Export from 'simple-mind-map/src/plugins/Export.js'
|
||||||
import Drag from 'simple-mind-map/src/plugins/Drag.js'
|
import Drag from 'simple-mind-map/src/plugins/Drag.js'
|
||||||
import Select from 'simple-mind-map/src/plugins/Select.js'
|
import Select from 'simple-mind-map/src/plugins/Select.js'
|
||||||
@ -56,6 +57,7 @@ MindMap
|
|||||||
.usePlugin(Watermark)
|
.usePlugin(Watermark)
|
||||||
.usePlugin(Drag)
|
.usePlugin(Drag)
|
||||||
.usePlugin(KeyboardNavigation)
|
.usePlugin(KeyboardNavigation)
|
||||||
|
.usePlugin(ExportPDF)
|
||||||
.usePlugin(Export)
|
.usePlugin(Export)
|
||||||
.usePlugin(Select)
|
.usePlugin(Select)
|
||||||
.usePlugin(AssociativeLine)
|
.usePlugin(AssociativeLine)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user