Markdown导出为 Excel文件 Vue3

直接复制到单文件内即可使用

需要用到的插件

• xlsx @0.17.5
• marked  @14.0.0
• file-saver @2.0.5
• vue @3.4.29

直接SFC单文件内使用

<script setup>
import {reactive} from 'vue';
import xlsx from 'xlsx';
import {marked} from 'marked';
import {saveAs} from 'file-saver';

const markdownTable = reactive({
  "code": 0,
  "message": "ok",
  "data": [
    "| 镜号 | 景别   | 场景   | 拍摄技巧       | 画面                                 | 台词               | 画面备选 | 道具   | 备注 |\n| ---- | ------ | ------ | -------------- | ------------------------------------ | ------------------ | -------- | ------ | ---- |\n| 1    | 大远景 | 山峰   | 无人机俯拍     | 无人机从高空俯拍山峰，云雾缭绕     | 大型古装仙侠爱情   |          |        |      |\n| 2    | 中景   | 山峰   | 镜头跟随       | 演员从山峰小路走下，表情凝重       |                    |          | 吊威亚 |      |\n| 3    | 近景   | 大海   | 镜头推进       | 女演员站在海边，风吹动衣裙         |                    |          |        |      |\n| 4    | 全景   | 树林   | 镜头环绕       | 男演员在树林中舞剑，树叶飘落       |                    |          |        |      |\n| 5    | 特写   | 树林   | 镜头聚焦       | 剑尖上的露珠                         |                    |          |        |      |\n| 6    | 中景   | 山峰   | 镜头快速切换   | 男女演员在山峰上相遇，眼神交流     |                    |          |        |      |\n| 7    | 大远景 | 大海   | 镜头拉远       | 大海波涛汹涌，远处有船只           |                    |          |        |      |\n| 8    | 近景   | 树林   | 镜头推进       | 女演员手抚树干，表情忧伤           |                    |          |        |      |\n| 9    | 全景   | 山峰   | 镜头环绕       | 山峰上男女演员并肩站立，背景壮丽   |                    |          |        |      |\n| 10   | 特写   | 大海   | 镜头聚焦       | 海浪拍打岩石，水花四溅             |                    |          |        |      |\n| 11   | 中景   | 树林   | 镜头跟随       | 男演员在树林中追逐，表情紧张       |                    |          |        |      |\n| 12   | 大远景 | 山峰   | 镜头拉远       | 山峰上男女演员相拥，背景云雾缭绕   |                    |          |        |      |\n| 13   | 近景   | 大海   | 镜头推进       | 女演员站在海边，眼神望向远方       |                    |          |        |      |\n| 14   | 全景   | 树林   | 镜头环绕       | 树林中男女演员相遇，背景树叶飘落   |                    |          |        |      |\n| 15   | 特写   | 山峰   | 镜头聚焦       | 山峰上男女演员手牵手，表情坚定     |                    |          |        |      |\n| 16   | 中景   | 大海   | 镜头跟随       | 大海中男女演员划船，表情平静       |                    |          |        |      |\n| 17   | 大远景 | 树林   | 镜头拉远       | 树林中男女演员并肩行走，背景宁静   |                    |          |        |      |\n| 18   | 近景   | 山峰   | 镜头推进       | 山峰上男女演员相视而笑，表情幸福   |                    |          |        |      |\n| 19   | 全景   | 大海   | 镜头环绕       | 大海中男女演员拥抱，背景波涛汹涌   |                    |          |        |      |\n| 20   | 特写   | 树林   | 镜头聚焦       | 树林中男女演员手牵手，表情坚定     |                    |          |        |      |", "\"| 镜号 | 景别   | 场景   | 拍摄技巧       | 画面                                 | 台词               | 画面备选 | 道具   | 备注 |\n| ---- | ------ | ------ | -------------- | ------------------------------------ | ------------------ | -------- | ------ | ---- |\n| 1    | 大远景 | 山峰   | 无人机俯拍     | 无人机从高空俯拍山峰，云雾缭绕     | 大型古装仙侠爱情   |          |        |      |\n| 2    | 中景   | 山峰   | 镜头跟随       | 演员从山峰小路走下，表情凝重       |                    |          | 吊威亚 |      |\n| 3    | 近景   | 大海   | 镜头推进       | 女演员站在海边，风吹动衣裙         |                    |          |        |      |\n| 4    | 全景   | 树林   | 镜头环绕       | 男演员在树林中舞剑，树叶飘落       |                    |          |        |      |\n| 5    | 特写   | 树林   | 镜头聚焦       | 剑尖上的露珠                         |                    |          |        |      |\n| 6    | 中景   | 山峰   | 镜头快速切换   | 男女演员在山峰上相遇，眼神交流     |                    |          |        |      |\n| 7    | 大远景 | 大海   | 镜头拉远       | 大海波涛汹涌，远处有船只           |                    |          |        |      |\n| 8    | 近景   | 树林   | 镜头推进       | 女演员手抚树干，表情忧伤           |                    |          |        |      |\n| 9    | 全景   | 山峰   | 镜头环绕       | 山峰上男女演员并肩站立，背景壮丽   |                    |          |        |      |\n| 10   | 特写   | 大海   | 镜头聚焦       | 海浪拍打岩石，水花四溅             |                    |          |        |      |\n| 11   | 中景   | 树林   | 镜头跟随       | 男演员在树林中追逐，表情紧张       |                    |          |        |      |\n| 12   | 大远景 | 山峰   | 镜头拉远       | 山峰上男女演员相拥，背景云雾缭绕   |                    |          |        |      |\n| 13   | 近景   | 大海   | 镜头推进       | 女演员站在海边，眼神望向远方       |                    |          |        |      |\n| 14   | 全景   | 树林   | 镜头环绕       | 树林中男女演员相遇，背景树叶飘落   |                    |          |        |      |\n| 15   | 特写   | 山峰   | 镜头聚焦       | 山峰上男女演员手牵手，表情坚定     |                    |          |        |      |\n| 16   | 中景   | 大海   | 镜头跟随       | 大海中男女演员划船，表情平静       |                    |          |        |      |\n| 17   | 大远景 | 树林   | 镜头拉远       | 树林中男女演员并肩行走，背景宁静   |                    |          |        |      |\n| 18   | 近景   | 山峰   | 镜头推进       | 山峰上男女演员相视而笑，表情幸福   |                    |          |        |      |\n| 19   | 全景   | 大海   | 镜头环绕       | 大海中男女演员拥抱，背景波涛汹涌   |                    |          |        |      |\n| 20   | 特写   | 树林   | 镜头聚焦       | 树林中男女演员手牵手，表情坚定     |                    |          |        |      |", "\"| 镜号 | 景别   | 场景   | 拍摄技巧       | 画面                                 | 台词               | 画面备选 | 道具   | 备注 |\n| ---- | ------ | ------ | -------------- | ------------------------------------ | ------------------ | -------- | ------ | ---- |\n| 1    | 大远景 | 山峰   | 无人机俯拍     | 无人机从高空俯拍山峰，云雾缭绕     | 大型古装仙侠爱情   |          |        |      |\n| 2    | 中景   | 山峰   | 镜头跟随       | 演员从山峰小路走下，表情凝重       |                    |          | 吊威亚 |      |\n| 3    | 近景   | 大海   | 镜头推进       | 女演员站在海边，风吹动衣裙         |                    |          |        |      |\n| 4    | 全景   | 树林   | 镜头环绕       | 男演员在树林中舞剑，树叶飘落       |                    |          |        |      |\n| 5    | 特写   | 树林   | 镜头聚焦       | 剑尖上的露珠                         |                    |          |        |      |\n| 6    | 中景   | 山峰   | 镜头快速切换   | 男女演员在山峰上相遇，眼神交流     |                    |          |        |      |\n| 7    | 大远景 | 大海   | 镜头拉远       | 大海波涛汹涌，远处有船只           |                    |          |        |      |\n| 8    | 近景   | 树林   | 镜头推进       | 女演员手抚树干，表情忧伤           |                    |          |        |      |\n| 9    | 全景   | 山峰   | 镜头环绕       | 山峰上男女演员并肩站立，背景壮丽   |                    |          |        |      |\n| 10   | 特写   | 大海   | 镜头聚焦       | 海浪拍打岩石，水花四溅             |                    |          |        |      |\n| 11   | 中景   | 树林   | 镜头跟随       | 男演员在树林中追逐，表情紧张       |                    |          |        |      |\n| 12   | 大远景 | 山峰   | 镜头拉远       | 山峰上男女演员相拥，背景云雾缭绕   |                    |          |        |      |\n| 13   | 近景   | 大海   | 镜头推进       | 女演员站在海边，眼神望向远方       |                    |          |        |      |\n| 14   | 全景   | 树林   | 镜头环绕       | 树林中男女演员相遇，背景树叶飘落   |                    |          |        |      |\n| 15   | 特写   | 山峰   | 镜头聚焦       | 山峰上男女演员手牵手，表情坚定     |                    |          |        |      |\n| 16   | 中景   | 大海   | 镜头跟随       | 大海中男女演员划船，表情平静       |                    |          |        |      |\n| 17   | 大远景 | 树林   | 镜头拉远       | 树林中男女演员并肩行走，背景宁静   |                    |          |        |      |\n| 18   | 近景   | 山峰   | 镜头推进       | 山峰上男女演员相视而笑，表情幸福   |                    |          |        |      |\n| 19   | 全景   | 大海   | 镜头环绕       | 大海中男女演员拥抱，背景波涛汹涌   |                    |          |        |      |\n| 20   | 特写   | 树林   | 镜头聚焦       | 树林中男女演员手牵手，表情坚定     |                    |          |        |      |,"
  ]
})

const exportTable = () => {
  // 将Markdown转换为HTML
  const html = marked(markdownTable.data[0]);
  // 创建DOM元素来存放转换后的HTML
  const container = document.createElement('div');
  container.innerHTML = html;
  // 提取表格元素
  const table = container.querySelector('table');
  // 将表格转换为工作表
  const ws = xlsx.utils.table_to_sheet(table);
  // 创建工作簿并添加工作表
  const wb = xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 生成Excel文件并导出
  const wbout = xlsx.write(wb, {bookType: 'xlsx', type: 'binary'});
  saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'table.xlsx');
}

// 将字符串转换为ArrayBuffer
const s2ab = (s) => {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}
</script>

<template>
  <div class="markdown">
    markdown
    <textarea v-model="markdownTable.data" rows="15" cols="15"></textarea>
    <button @click="exportTable">导出Excel</button>
  </div>
</template>

效果图

• 页面效果图
• 导出后的excel效果图