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

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

相关推荐
半花1 分钟前
i18n国际语言化配置
前端
编程贝多芬4 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort6 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio8 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗11 分钟前
JS的对象属性存储器
前端
Lotzinfly12 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果12 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼17 分钟前
React中,useState和useReducer有什么区别
前端
普郎特27 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云36 分钟前
前端错误可观测最佳实践
前端