在VitePress搭建的博客里在线预览xmind文件

背景

相信很多人都会将知识、笔记、想法等内容创作成思维导图,笔者也不例外,会把一些平时学习的笔记写到xmind。在思维导图创作工具方面也有很多选择,笔者比较喜欢使用下面几款:

  1. 语雀 : www.yuque.com
  2. ProcessOn : www.processon.com
  3. Xmind : www.xmind.cn

其中在线的思维导图创作工具我们只要有网络就能实时访问,体验还是非常好的。但是如果有一天你想把你的思维导图迁移到你自己的博客网站上,那么不得不使用各个工具的导出功能,一般都可以导出为png图片或者 xmind文件,但是当你的头脑风暴足够大(图节点足够多的时候),导出来的图片放到博客网站后不是很方便阅读,比如下图:

由于咱们的图片太大了,就会有滚动条,而且字体还很小,特别不方便阅读,因此笔者就想着有没有插件能支持在浏览器中预览xmind 文件,废话不多说了,接下来看下方案吧。

实现

笔者想着先到掘金上找一下,但是貌似掘金没有相关的文章,如下图:

然后笔者在GitHub找了一下,发现可以通过xmind-embed-viewer这个包来实现 xmind 文件的在线预览

好了接下来就是站在巨人的肩膀上 Coding,以下是一个笔者在Vitepress中使用的例子:

XmindViewer.vue

给容器加了一个loading的效果:

Loading.vue

使用:

vue 复制代码
<script setup>
  import XmindViewer from '@/XmindViewer'
</script>

<XmindViewer url="https://mp-cb2e47ef-a802-469a-a81c-2b6efa9f8b60.cdn.bspapp.com/xmind/browser-rendering-flow.xmind"/>

效果:

点击此处获取源码。

总结

本文借助xmind-embed-viewer,实现了xmind文件的在线预览功能,如果有掘友遇到相关需求,到掘金能够搜索到这篇文章,也算没白写,哈哈!

如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【】都是我创作的最大动力 ^_^

相关推荐
写不来代码的草莓熊几秒前
vue前端面试题——记录一次面试当中遇到的题(3)
前端·javascript·vue.js
道可到11 分钟前
写了这么多代码,你真的在进步吗??—一个前端人的反思与全栈突围路线
前端
洛克大航海13 分钟前
Ajax基本使用
java·javascript·ajax·okhttp
用户9163574409515 分钟前
LeetCode热题100——11.盛最多水的容器
javascript·算法
凡大来啦30 分钟前
v-for渲染的元素上使用ref
前端·javascript·vue.js
道可到32 分钟前
前端开发的生存法则:如何从“像素工人”进化为价值创造者?
前端
eggcode33 分钟前
Vue前端开发学习的简单记录
vue.js·学习
中微子43 分钟前
TypeScript 泛型与 ReturnType 详解
前端
我叫张得帅44 分钟前
从零开始的前端异世界生活--003--“探究Domain,DNS,Hosting”
前端
一大树1 小时前
H5在不同操作系统与浏览器中的兼容性挑战及全面解决方案
前端·ios