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(``)) + } + 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(``)) - } + let foreignObjectList = node.find('foreignObject') + if (foreignObjectList.length > 0) { + foreignObjectList[0].add(SVG(``)) } } node.first().before(SVG(`