导入和导出
导出
要使用导出功能需要使用导出插件。
目前支持导出为.smm、.json、.svg、.png、.pdf、.md、.xmind、.txt文件。
.smm是simple-mind-map自己定义的一种文件,其实就是json文件,换了一个扩展名而已。
导出直接调用export方法即可:
mindMap.export(type, isDownload, fileName, ...)type:文件类型
isDownload:传true会触发下载,false则不会,函数会返回导出文件的数据,data:url格式,你可以自行下载,(v0.9.2之前的版本,pdf不支持该参数,默认会直接下载)。
fileName:下载的文件名称
导出为smm、json
这两种文件的导出是一样的:
mindMap.export(type, isDownload, fileName, withConfig)withConfig指定导出的数据中是否要包含节点数据外的配置数据,比如使用的布局、主题等,传true,导出的结构如下:
{
layout,
root,
theme: {
template,
config
},
view
}如果传false,导出的数据只有root部分,也就是纯节点树。
示例:
mindMap.export('smm', true, '文件名', true)
mindMap.export('json', true, '文件名', false)导出为png、pdf
导出这两种文件很简单:
mindMap.export('png', true, '文件名')
mindMap.export('pdf', true, '文件名')从v0.6.0+,要导出pdf,需要额外注册一个ExportPDF插件。
导出为svg
导出为svg可以传递的参数如下:
mindMap.export(type, isDownload, fileName, plusCssText = '')如果开启了节点富文本编辑,也就是svg中会存在节点的html结构,这就又存在一个问题,因为浏览器对每个元素默认会设置一些样式,影响最大的就是margin和padding,这就有可能会导致节点中的文字错位,所以可以通过plusCssText参数传入css样式:
在v0.6.16+版本后,plusCssText参数已被删除,改为在实例化时通过
resetCss配置传入。
mindMap.export(
'svg',
true,
'文件名',
false,
`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`
)导出为md
导出为markdown文件只要传递默认的三个参数即可:
mindMap.export('md', true, '文件名')导出为xmind
v0.6.6+
需要注册
ExportXMind插件
导出为Xmind新版文件。
mindMap.export('xmind', '文件名')导出为txt
v0.9.8+
导出为txt文件只要传递默认的三个参数即可:
mindMap.export('txt', true, '文件名')导入
目前支持从.smm、.json、.xmind、.xlsx、.md格式的文件导入。
导入smm、json
这两个文件导入很简单,直接读取文件内容,转成对象,然后调用相关方法渲染到画布即可。
因为导出这两种类型时可以选择是否包含配置数据,所以导入的时候调用的方法也是不一样的:
let data = JSON.parse('json数据')
// 如果数据中存在root属性,那么代表是包含配置的完整数据,则使用setFullData方法导入数据
if (data.root) {
mindMap.setFullData(data)
} else {
// 否则使用setData方法导入
mindMap.setData(data)
}
// 导入数据后有可能新数据渲染在可视区域外了,所以为了更好的体验,可以复位一下视图的变换
mindMap.view.reset()导入xmind
要导入xmind文件,需要引入xmind的解析方法:
import xmind from 'simple-mind-map/src/parse/xmind.js'如果使用的是umd文件,可以这样获取:
MindMap.xmind如果你是通过input type=file等方式获取到的File文件对象,那么可以直接传递给parseXmindFile方法解析,注意返回的是一个Promise实例,会返回解析后的节点树数据,使用setData方法渲染到画布即可。
let data = await xmind.parseXmindFile(file)
mindMap.setData(data).xmind文件本质上是一个压缩包,改成zip后缀可以解压缩,里面存在一个content.json文件,如果你自己解析出了这个文件,那么可以把这个文件内容传递给这个transformXmind方法进行转换:
let data = await xmind.transformXmind(fileContent)
mindMap.setData(data)另外如果导入的是xmind8版本的数据,需要使用transformOldXmind方法。
导入xlsx
这个文件的导入没有内置方法,需要你自己开发,以下是一个使用xlsx库的方式:
import { read, utils } from 'xlsx'
// 文件转buffer
export const fileToBuffer = file => {
return new Promise(r => {
const reader = new FileReader()
reader.onload = () => {
r(reader.result)
}
reader.readAsArrayBuffer(file)
})
}
// File文件对象
const transformXLSXToJson = async (file) => {
const wb = read(await fileToBuffer(file))
const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
header: 1
})
if (data.length <= 0) {
return
}
let max = 0
data.forEach(arr => {
if (arr.length > max) {
max = arr.length
}
})
let layers = []
let walk = layer => {
if (!layers[layer]) {
layers[layer] = []
}
for (let i = 0; i < data.length; i++) {
if (data[i][layer]) {
let node = {
data: {
text: data[i][layer]
},
children: [],
_row: i
}
layers[layer].push(node)
}
}
if (layer < max - 1) {
walk(layer + 1)
}
}
walk(0)
let getParent = (arr, row) => {
for (let i = arr.length - 1; i >= 0; i--) {
if (row >= arr[i]._row) {
return arr[i]
}
}
}
for (let i = 1; i < layers.length; i++) {
let arr = layers[i]
for (let j = 0; j < arr.length; j++) {
let item = arr[j]
let parent = getParent(layers[i - 1], item._row)
if (parent) {
parent.children.push(item)
}
}
}
return layers[0][0]
}
let data = transformXLSXToJson('xlsx文件对象')
mindMap.setData(data)导入md
要导入markdown文件需要引入相应的解析方法:
import markdown from 'simple-mind-map/src/parse/markdown.js'如果使用的是umd格式的文件,那么可以通过如下方式获取:
MindMap.markdown获取到md文件的内容后调用transformMarkdownTo方法转换即可,返回一个Promise实例:
let data = await markdown.transformMarkdownTo('md文件内容')
mindMap.setData(data)