vue+element实现word文档(转成markdown了)带目录预览

拿到这个需求，感觉这个难点在于目录跳转，word就算读取也全是字，无法识别哪里是目录，然后去提取目录和做定位。年前做项目时，因为项目中公共组件比较多，就想写个使用说明，专门去学过markdown的语法，在markdown中，1个到6个#号分别对应html标签中h1-h6，如果能把word转成markdown，不就可以根据#提取出一个目录了吗？所以要做的第一部就是把word转成markdown。

word转markdown

word转markdown的首先想的是找找有没在线工具，不用下载直接用还是比较舒服的。在网上倒是找到了一个，但是说实话，效果不太好。之前玩游戏要自己做一个筛选页面，因为excel看着实在太费劲了，需要把ecexl表格转JSON数据，然后再处理成组件需要的格式，那会也是找了好多在线的都不好用，最后用的是一个excel自带的插件，名字叫excel to json，还是非常好用的。对了，那个筛选页面我扔到码云上了，已发布到网上，点击这里查看，上面那个筛选组件(我叫选项卡)是我手写的，有需要的可以联系我。所以最后考虑word有没自带的插件能把它转成一个md文件，最后还真找到了一个插件 Writage 转md文件效果特别好，会把word文档里的图片提取到一个文件夹里，打开md文件，所有图片均能正常显示，15000+字的文档只有一处错误，手动改了。Writage 安装好之后，最上面就能看到。

安装好之后点文件，另存为，选择存放位置，选择格式，这里格式一定要选md。

然后你就可以在之前选择的位置找到它的md格式版，同时还会有一个目录，用来存放文档中所有涉及到的图片，至于help.js是干什么的后面会解释。

到这里有两种选择，一种是md文件和media文件夹都放在服务器上，通过请求后端接口来展示，另一种是都放在前端，纯前端展示。这里先说第一种，都放在服务器上，通过接口请求md内容，然后再做展示。

用node的express框架搭建服务器

这里的代码啥意思就不说了，直接上代码

// express-static得用npm下载 npm i express-static --save
const express = require("express");
const expressStatic = require("express-static");
const fs = require('fs');

var server = express();
server.listen(5566);
console.log('服务器启动成功地址是： localhost:5566');

// 配置请求头
server.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Requested-With")
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8")
    next()
});

// 读取help.md里的内容并返回给前端
server.use("/getHelp", function (req, res) {
    // 同步读取文件
    let helpData = fs.readFileSync("./document/help.md");
    res.send(helpData);
});

// 静态文件目录
server.use(expressStatic("./document"));

终端启动服务器，后面是目录结构

后端服务写好了，现在让我们来写前端代码，因为是要做demo，所以直接在app.vue里写，这里用的是axios(npm i axios -S)进行的请求。

mehtods里

    getHelp() {
      this.$axios
        .get("http://localhost:5566/getHelp")
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

created里调用这个方法，我们就拿到了help点md里的内容。接下来考虑怎么把md格式的内容展示到页面上