介绍：这是一个前端思维导图展示的插件，以及下载svg功能，内部用的scss，不一样的需要改一下，整体也没写太复杂。
效果：
依赖：
{
"markmap-common": "^0.14.2",
"markmap-lib": "^0.14.4",
"markmap-view": "^0.14.4",
"file-saver": "^2.0.5"
}代码：
<template>
<div class="mind-map-wrap">
<svg id="markmapPrev" ref="svgRef" :style="style" />
<div class="download" @click="downloadMindmap">下载</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Transformer } from "markmap-lib";
import { Markmap, loadCSS, loadJS } from "markmap-view/dist/index.esm";
import { saveAs } from "file-saver";
const props = defineProps({
content: {
type: String,
required: true,
default: ""
},
style: {
type: Object,
default: () => ({
width: "100%",
minHeight: "100%"
})
}
});
const svgRef = ref();
const content = ref(props.content);
const rootRef = ref();
let mm;
// mm.destroy()销毁
const transformer = new Transformer();
const update = () => {
const { root, features } = transformer.transform(content.value);
const { styles, scripts } = transformer.getUsedAssets(features);
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });
rootRef.value = root;
mm.setData(root);
mm.fit();
};
onMounted(() => {
mm = Markmap.create(svgRef.value);
console.log(mm.destroy);
update();
});
const downloadMindmap = () => {
const svgEl = document.querySelector("#markmapPrev");
const svgData = new XMLSerializer().serializeToString(svgEl);
const blob = new Blob([svgData], { type: "image/svg+xml" });
saveAs(blob, "mindmap.svg");
};
</script>
<style lang="scss" scoped>
.mind-map-wrap {
width: 100%;
height: 100%;
position: relative;
.download {
position: absolute;
right: 100px;
top: 100px;
color: #fff;
background: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px #0000000b;
padding: 4px 15px;
border-radius: 4px;
cursor: pointer;
}
}
</style>
使用：
// 第一步 引入
import MindMap from "./components/MindMap/index.vue";
// 第二部 模板组件使用
<MindMap
:content="'你的文字内容'"
:style="{ width: '100%', height: '100%' }"
/>
