前端在线预览xmind文件，处理二进制流，使用插件：xmind-embed-viewer

最新推荐文章于 2024-07-15 22:20:11 发布
最新推荐文章于 2024-07-15 22:20:11 发布
阅读量2.7k 收藏 3
点赞数 1
文章标签： vue.js 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58278738/article/details/128528870
版权
本文介绍了如何在前端实现在线预览xmind文件，特别是当后端返回二进制流时的处理方法。通过使用xmind-embed-viewer插件，结合axios设置responseType为'blob'，在响应拦截器中处理二进制流，并创建专门的页面展示xmind内容。预览功能实现后，可能存在页面加载速度问题，完整示例可在github的xmind-embed-viewer项目中查看。
摘要由CSDN通过智能技术生成

要求：在一个文件系统内，能在线预览xmind文件，

后端可返回文件地址：test-1.xmind，也可返回的是二进制流，二进制流如下：

前端处理：

1、下载插件：xmind-embed-viewer

npm i xmind-embed-viewer
<
最低0.47元/天 解锁文章
m0_58278738
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
WEB前端html标记语言思维导图（Xmind）
06-23
本人网页制作课程所用的思维导图，包含了所有web前端技术的概念和知识点，比较适合学生、初学者建立一个初步的思维模型，另外本人还有CSS样式表的思维导图，欢迎大家下载查看。
前端控件总结.xmind
04-01
前端测试许多输入框大同小异，这个文档比较全，可以免去大家比较多的麻烦
如何使用网页在线打开.Xmind文件(思维导图文件)和建模文件（.SLDPRT文件和.SLDASM文件）
xuechanba的博客
04-21 3万+
打开 .Xmind 文件直接使用百度脑图 https://naotu.baidu.com/来直接打开。 打开 .SLDPRT文件和 .SLDASM文件可以使用三维云图这个软件去打开。 网址为：https://www.yuntucad.com/，它还可以在小程序中搜索的到。 ...
Vue中使用mind-map实现在线思维导图
最新发布
LZUGIS
07-15 1619
给大家分享一下基于mind-map实现在线的思维导图，并实现：1. 导图导出为图片；2. 打开xmind文件。
前端读取后端二进制流内容预览Xmind文件
造血干细胞的博客
07-20 1034
左侧导航栏获取图谱列表，点击切换右侧的图谱内容，默认显示第一个图谱内容。
前端--脑图xmind
pang_0704的博客
07-07 2636
前端小白纯纯记录工作，今日共享-jsmind，页面呈现xmind脑图效果
前端XMind汇总
03-08
除了小部分别人分享的，其他全是自己总结的，主要是原生的，nodejs，Vue，React等等也有，没原生详细
记录--前端实现文件预览(word、excel、pdf、ppt、xmind、 音视频、图片、文本) 国际化
林恒的博客
06-12 430
在这之前公司项目的文档预览的方式都是通过微软在线预览服务，但是微软的在线服务有文件大小限制，想完整使用得花钱，一些图片文件就通过组件库antd实现，因为我们项目存在多种类型的文件，所以为了改善用户的体验，决定把文件预览单独弄一个拆出一个项目出来，我们先看一下最终预览效果。如果这些基础的文档渲染render组件，不符合业务需求，你也可以自定义render组件在你自己的项目中，然后跟随pluginsRenders传入即可return (
xmind在线预览，编辑，保存，本地xmind读取、远程xmind文件流链接读取
热门推荐
xlzy
11-19 4万+
https://github.com/zhibikanmohuakai/kityminder 基于百度脑图，移除百度验证，在edit.html中配置远程链接与保存文件时调用的接口与方法。
在docsify中预览xmind文件
CodingMyDream的博客
01-12 577
使用docsify的留意了，一款docsify插件，用于在网页文档上预览xmind思维导图文件；在docsify的md文档中能查看xmind文档。
前端HTML思维导图.xmind
07-30
html中常用的标签以及h5中新增添的一些内容，这是自己学习过程中做的思维导图，常用的一些算是都在里面了，
WEB前端.xmind
10-07
WEB前端.xmind
前端基础总结思维导图Xmind大纲
04-06
XMIND大纲
思维导图插件
05-31
javascript 思维导图插件 avascript 思维导图插件 javascript 思维导图插件
文件在线预览系统
08-12
1、首先安装openoffice 配置环境变量 2、安装swftools配置环境变量。 3、通过 FileService 对上传的doc ppt xls pdf png文件进行转换。 4、通过flaxpaper进行在线预览
h5一些常用总结【xMind文件】
09-24
刚刚学完H5不久，用xMind软件瞎总结了一下，感觉H5还是蛮强大的，比较喜欢拖拽和文件上传，初入行，把自己学的拿出来分享下，很适合新手，加油~~~
前端HTML基础思维导图-Xmind 前端学习第一周总结
山高水长 我边走边忘
05-14 519
html基础思维导图
xmind文件在线查看，编辑，保存，读取
m0_62896692的博客
08-11 2万+
如果没有创建过脑图文件，那就要新创建一个。然后在脑图内导入你想要打开的xmind文件就好了。3）下载Xmind，作为一款经典的思维导图工具，其实用性还是数一数二的。在“新建”里点击左侧的“思维导图”，然后点击右侧的“导入思维导图”即可。2）可以使用WPS打开（需要下载，不过电脑上可能会自带）下载，对后续的编辑和保存也会变得简单起来。如果没有百度账号需要注册一个，登录即可。1）可以尝试用百度脑图。在WPS里点击“新建”...
如何在线打开Xmind文件 — openfiles.online在线工具
weixin_44012893的博客
04-16 5988
在线打开xmind思维导图，无注册、无下载、无广告哦
xmind-viewer插件使用教程
11-17
以下是xmind-embed-viewer插件的使用教程： 1. 首先，你需要在你的项目中安装xmind-embed-viewer插件。你可以使用npm命令进行安装：npm i xmind-embed-viewer。 2. 安装完成后，在你的html文件中引入xmind-embed-viewer.js文件。 ```html <script src="./node_modules/xmind-embed-viewer/dist/xmind-embed-viewer.js"></script> ``` 3. 在你的html文件中添加一个div元素，用于展示xmind文件。 ```html <div id="xmind-container"></div> ``` 4. 在你的JavaScript文件中，使用以下代码来加载xmind文件并展示在页面上。 ```javascript const xmindViewer = new XMindViewer({ el: '#xmind-container', path: 'path/to/your/xmind/file.xmind' }) ``` 其中，el属性指定了展示xmind文件的div元素的id，path属性指定了你的xmind文件的路径。 5. 运行你的项目，你就可以在页面上看到你的xmind文件了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值