From 60e503ab1fd884bf39ab9a2b3289fca5deb60b3c Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Mon, 21 Aug 2023 15:10:03 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A1.=E5=8E=BB=E9=99=A4=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BAsvg=E6=96=B9=E6=B3=95=E7=9A=84=E7=AC=AC=E4=BA=8C?=
 =?UTF-8?q?=E4=B8=AA=E5=8F=82=E6=95=B0=EF=BC=8C=E6=94=B9=E4=B8=BA=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=E5=AE=9E=E4=BE=8B=E5=8C=96=E9=85=8D=E7=BD=AE=EF=BC=9B?=
 =?UTF-8?q?2.=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=A4=96=E9=83=A8=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/constants/defaultOptions.js           | 11 ++++++-
 simple-mind-map/src/plugins/Export.js         | 31 +++++++++++--------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 693a67ef..7b919f96 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -155,5 +155,14 @@ export const defaultOpt = {
   // 错误处理函数
   errorHandler: (code, error) => {
     console.error(code, error)
-  }
+  },
+  // 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖
+  // 如果不覆盖，会发生偏移问题
+  resetCss: `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+  `
 }
diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js
index 9b616f56..08c8ec3c 100644
--- a/simple-mind-map/src/plugins/Export.js
+++ b/simple-mind-map/src/plugins/Export.js
@@ -184,13 +184,20 @@ class Export {
     str = removeHTMLEntities(str)
     // 如果开启了富文本，则使用htmltocanvas转换为图片
     if (this.mindMap.richText) {
-      let res = await this.mindMap.richText.handleExportPng(node.node)
-      let imgDataUrl = await this.svgToPng(
-        res,
-        transparent,
-        rotateWhenWidthLongerThenHeight
-      )
-      return imgDataUrl
+      // 覆盖html默认的样式
+      let foreignObjectList = node.find('foreignObject')
+      if (foreignObjectList.length > 0) {
+        foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
+      }
+      str = node.svg()
+      // 使用其他库（html2canvas、dom-to-image-more等）来完成导出
+      // let res = await this.mindMap.richText.handleExportPng(node.node)
+      // let imgDataUrl = await this.svgToPng(
+      //   res,
+      //   transparent,
+      //   rotateWhenWidthLongerThenHeight
+      // )
+      // return imgDataUrl
     }
     // 转换成blob数据
     let blob = new Blob([str], {
@@ -229,15 +236,13 @@ class Export {
 
   //  导出为svg
   // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
-  async svg(name, plusCssText) {
+  async svg(name) {
     let { node } = await this.getSvgData()
     // 开启了节点富文本编辑
     if (this.mindMap.richText) {
-      if (plusCssText) {
-        let foreignObjectList = node.find('foreignObject')
-        if (foreignObjectList.length > 0) {
-          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
-        }
+      let foreignObjectList = node.find('foreignObject')
+      if (foreignObjectList.length > 0) {
+        foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
       }
     }
     node.first().before(SVG(`<title>${name}</title>`))