直接复制到单文件内即可使用
需要用到的插件
- xlsx @0.17.5
- marked @14.0.0
- file-saver @2.0.5
- vue @3.4.29
直接SFC单文件内使用
javascript
<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效果图
