前端读取后端二进制流内容预览Xmind文件

前端读取后端二进制流内容预览Xmind文件

一、页面效果及功能描述

左侧导航栏获取图谱列表，点击切换右侧的图谱内容，默认显示第一个图谱内容。

使用的插件

xmind-embed-viewer

二、后端实现

数据量很小，暂时把导图内容存到public文件夹里啦。nodeJS小白，接口写的很简单

1. 获得图谱列表接口

router.get("/_token/list", async (req, res) => {
    fs.readdir(path.resolve(__dirname, "../public/xmind"), (err, files) => {
        if (err) {
            res.send({
                code: 500,
                message: "查询失败"
            })
        }
        let list = [];
        files.forEach(item => {
            list.push(item.split(".")[0])
        })
        res.send({
            code: 200,
            data: list,
            message: "获取xmind列表成功"
        })
    })
})

2. 获得xmind二进制流文件接口

router.get("/_token/file", async (req, res) => {
    let name = req.query.name;
    fs.readdir(path.resolve(__dirname, "../public/xmind"), (err, files) => {
        if (err) {
            res.send({
                code: 500,
                message: "获取文件失败"
            })
        }
        for (let i = 0; i < files.length; i++) {
            if (files[i].split(".")[0] === name) {
                res.sendFile(path.resolve(__dirname, `../public/xmind/${name}.xmind`), (err) => {
                    if (err) {
                        res.send({
                            code: 500,
                            message: "获取文件失败"
                        })
                    }
                });
                break;
            }
        }
    })
})

三、前端实现 Vue3

1. 初始化左侧导航列表

初始化数据并且默认打开第一个导图，直接接收list接口发来的数组即可。

const knowledge_nav = ref([]);
const initXmindContent = async function () {
  request({
    url: api.blog.getXmindList
  }).then(res => {
    if (res.code === 200)
    {  
      knowledge_nav.value = res.data;
      active_nav.value = knowledge_nav.value[0];
      changeXmind(active_nav.value); //函数代码在下面
    }
    else message.error(res.message);
  }).catch(err => {
    console.log(err);
  })
}

2. 图谱内容展示

a. 准备dom容器

 <div id="showGraph"> </div>

b. 新建视图

这里注意，视图新建一个就好了。最初我在每次接收到一次数据之后都新建了一个，导致多个视图叠加。

let present_viewer = null;
onMounted(() => {
  initXmindContent();
  present_viewer = new XMindEmbedViewer({
    el: "#showGraph",
    styles: { height: "100%", width: "100%" },
  });
})

c. 获取二进制文件并渲染

注意这里要设置响应类型responseType，不然无法解析文件内容。

const changeXmind = function (item) {
  //请求后端获取导图
  request({
    url: api.blog.getXmindFile + `?name=${item}`,
    responseType: "blob"
  }).then(res => {
    nextTick(() => {
      present_viewer.load(res)
    })
  }).catch(err => {
    console.log(err);
  })
}