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

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

相关推荐
jiangzhihao05153 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI6 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front7 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie7 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀7 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻7 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树8 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔8 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城8 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04128 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端