在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文件的在线预览功能,如果有掘友遇到相关需求,到掘金能够搜索到这篇文章,也算没白写,哈哈!

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

相关推荐
悟能不能悟38 分钟前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶43 分钟前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice2 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip2 小时前
js上下文
前端·javascript
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)2 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休3 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel3 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组3 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架