前端实现识别并下载markdown文本中格式为Table的数据

需求

在一串markdown文本字符串中，若存在table格式的数据，显示下载按钮，点击可将数据下载成excel格式

md格式Table数据样例
`
需求名称 | 用例名称 | 前置条件 | 用例步骤 | 预期结果 | 用例等级
---|---|---|---|---|---
列表倒序排列 | 验证列表倒序排列功能 | 用户已登录且有多个条目 | 1.打开列表页面 2.观察列表内容的排序 | 所有列表内容按照首次创建的时间倒序排列 | P1
...
`;   

一开始打算用正则去命中，但是用正则匹配容易漏掉某些特殊情况

解决方案

npm install markdown-it xlsx

MarkdownIt.render方法能将 markdown 字符串转换为 HTML，很牛逼，然后再通过html去截取table

  const matchTable = (mdContent) => {
    const mdParser = markdownIt();
    // 将Markdown内容转换为HTML
    const html = mdParser.render(mdContent);
    // 使用HTML表格正则表达式匹配表格部分
    const tableRegex = /<table[\s\S]*?<\/table>/g;
    return html.match(tableRegex);
  };
  function markdownTableToExcel(mdContent) {
    // 解析Markdown内容
    const matchedTables = matchTable(mdContent);
    if (matchedTables) {
      for (const table of matchedTables) {
        // 将HTML表格转换为DOM结构（这里假设在浏览器环境下）
        const tempDiv = document.createElement("div");
        tempDiv.innerHTML = table;

        const tableElement = tempDiv.querySelector("table");
        if (!tableElement) continue;

        // 将DOM表格转换为二维数组
        const tableData = Array.from(tableElement.rows).map((row) =>
          Array.from(row.cells).map((cell) => cell.innerText.trim())
        );

        // 创建工作簿对象
        const workbook = XLSX.utils.book_new();

        // 将表格数据转换为 worksheet 对象
        const worksheet = XLSX.utils.aoa_to_sheet(tableData);

        // 添加worksheet到workbook
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

        // 导出 Excel 文件
        const wbout = XLSX.write(workbook, { bookType: "xlsx", type: "array" });

        // 创建 Blob 并下载
        const blob = new Blob([wbout], { type: "application/octet-stream" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "table.xlsx";
        document.body.appendChild(link);

        // 触发点击以下载
        link.click();

        // 清理
        setTimeout(() => {
          document.body.removeChild(link);
          URL.revokeObjectURL(url);
        }, 0);
      }
    }
  }