How to import and export mind map data using Vue and jsmind?

How to import and export mind map data using Vue and jsmind?

Mind map is an intuitive and effective thinking tool that helps us organize and organize our thinking and clarify our ideas. In web development, the combination of Vue and jsmind can easily realize the import and export of mind map data.

1. Introduce jsmind library and styles

First, you need to introduce jsmind library and styles. It can be introduced through CDN, or jsmind related files can be downloaded locally.

<!-- 引入jsmind库 -->
<script src="https://unpkg.com/jsmind/dist/jsmind.min.js"></script>
<!-- 引入jsmind样式 -->
<link rel="stylesheet" href="https://unpkg.com/jsmind/dist/jsmind.css">

2. Create a Vue component

Next, we create a Vue component to display the mind map and handle the import and export of data.

<template>
  <div>
    <!-- 展示思维导图的容器 -->
    <div id="jsmind_container"></div>
    
    <!-- 导入按钮 -->
    <input type="file" @change="importData" accept=".json">
    
    <!-- 导出按钮 -->
    <button @click="exportData">导出</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在mounted钩子中初始化思维导图
    this.initJsmind();
  },
  methods: {
    initJsmind() {
      const mind = {
        meta: {
          name: '思维导图',
          author: '作者'
        },
        format: 'node_tree',
        data: [
          { id: 'root', isroot: true, topic: '主题', expanded: true, children: [] }
        ]
      };
      
      const container = document.getElementById('jsmind_container');
      this.jsmindInstance = jsMind.show(container, mind);
    },
    importData(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const importedData = JSON.parse(event.target.result);
        this.jsmindInstance.show(importedData);
      };
      reader.readAsText(file);
    },
    exportData() {
      const exportedData = this.jsmindInstance.get_data('node_tree');
      const json = JSON.stringify(exportedData);
      const blob = new Blob([json], { type: 'application/json' });

      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '思维导图.json';
      link.click();
    }
  }
};
</script>

3. Parse mind map data

The data format of mind map is the universal JSON format, and the imported data can be parsed into js objects through the JSON.parse method. Then, pass the parsed data to the show method of the jsmind instance to display the imported mind map.

importData(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const importedData = JSON.parse(event.target.result);
    this.jsmindInstance.show(importedData);
  };
  reader.readAsText(file);
}

4. Export mind map data

Exporting mind map data requires converting the data of the jsmind instance into JSON format and using the Blob object to create a file. Finally, the file download is triggered through the click method of the a tag.

exportData() {
  const exportedData = this.jsmindInstance.get_data('node_tree');
  const json = JSON.stringify(exportedData);
  const blob = new Blob([json], { type: 'application/json' });

  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = '思维导图.json';
  link.click();
}

5. Complete the data import and export of the mind map

Through the above steps, we have completed the function of using Vue and jsmind to import and export the data of the mind map. Users can click the Import button to select the imported file, and then click the Export button to download the mind map data to the local in JSON format. Users can also initialize the mind map in the mounted hook of the Vue component to further expand and optimize functions.

<template>
  <div>
    <div id="jsmind_container"></div>
    <input type="file" @change="importData" accept=".json">
    <button @click="exportData">导出</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initJsmind();
  },
  // ...
};
</script>

The above are methods and code examples for using Vue and jsmind to import and export data in mind maps. In this way, we can flexibly process mind map data and easily import and export mind maps.

The above is the detailed content of How to import and export mind map data using Vue and jsmind?. For more information, please follow other related articles on the PHP Chinese website!