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 @@