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