Markdown导出为 Excel文件 Vue3

于 2024-08-14 09:54:43 发布
阅读量393 收藏
点赞数 4
文章标签： excel vue.js vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48215380/article/details/141182341
版权

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

需要用到的插件

  • 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效果图
我的椰子啊
关注
基于 VSTO 技术使用 C# 将 Markdown 格式文本从系统剪贴板转换为 Word、Excel、PPT 格式并写入到已经打开的文档
weixin_45055317的博客
09-23 296
VSTO C# Markdown 转换为 Word、Excel、PPT 格式
将Excel表格转换为MarkDown表格利器
05-31
将Excel表格转换为MarkDown表格，可拖拽图片上传，支持数学公式等等，单纯就Markdown的支持来说，比sublime要好
文本转为mardown表格或者是excel在线工具
hello world
01-01 1764
只要粘贴（从 Microsoft Excel、Google Sheets、Mac Numbers 或网页中复制的表格）或将 Excel 拖放到 数据源 的 textarea 中，它将立即执行转换的魔力。在 表格生成器 面板中，你可以轻松自定义标记格式。享受快速转换，将代码复制到 Markdown Editor 或 MD 文件中。你可以通过 表格编辑器 像 Excel 一样在线编辑你的数据，所有的更改将实时转换为 Markdown 表格。如果有需要，可以使用表格编辑器修改你的 Excel。
Excel转Markdown表格
Jason_Flash的博客
07-21 741
Excel转Markdown表格前言使用方法 前言 在开发工作中，可能会遇到需要将Excel转换成Markdown表格的情况，手动转换既费时又容易出错。接下来推荐一个好用的网站，可以快速将Excel转换成Markdown表格： https://tableconvert.com 使用方法 打开https://tableconvert.com 点击菜单栏的import按钮，可以看到跳出的Import Data窗口： 从Excel中复制一系列单元格并将其粘贴到文本框中，单击Import data按
excel导入与导出(markdown版本）
aishenla的博客
10-22 1764
前段时间要做一个excel表格的上传下载功能，上网找了各种资料及源码，最后借用别人的代码及思路完成了符合自己需求的代码，总结一下excel的上传下载实质是通过第三方的类库比如poi，jxl等对excel单元格的设置与读写，通过类库的api，你可以发现各种各样的操作excel的方法，基本上只要你能在office的excel上进行的基本操作通过代码都能实现。上传文件：首先新建一个工具类，我命名为Impo
Markdown中如何插入EXCEL表格
热门推荐
Sugar的专栏
06-10 2万+
今天写一篇文章的时候，需要在文章中插入一段表格，开始本打算用截图，但是这个表格有点长，截图显然不合适，而且截图不好看，看了CSDN的MARKDOWN插入表格的说明，太麻烦了。有什么简单的方法呢？通过强大的百度，找到了解决的方法：这里是网友的解决办法：http://www.ituring.com.cn/article/3452 这是一个能将EXCEL表格转化成HTML格式的在线网址：http://p
vue利用file-saver和xlsx实现导出Excel表格到本地
wuxiaoqing_818的博客
06-17 2236
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
- 导出excel,自定义样式导出excel、多表头导出 - 表单、表格、水印、多标签显示、打印功能，图片打印、表格打印、普通打印、二维码、拖拽、markdown、头像裁剪、图片上传... - 使用 Prettier 统一格式化代码，集成 ...
vue+element实现word文档(转成markdown了)带目录预览
木子的博客
05-28 6669
vue展示word带目录
Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流 Blob 对象，前端实现点击下载功能）
王佳斌
12-19 5534
vue3，vue3 blob对象下载，vue3下载二进制文件流，下载blob二进制文件，vue3调用接口获取二进制文件流如何下载到本地，下载图片图像excel word pdf ppt文件，vue3请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue3使用blob下载流文件，vue3获取后端的Blob文件流下载文件，vue3通过blob下载流文件，vue3下载Blob文件,vue3后端返回二进制流-前端通过blob对象下载文件-图片，vue3实现文件下载功能，Vue3中利用Blob对象实现下载文件的超详
vue 中使用 exceljs 生成省市区关联表格
weixin_40414540的博客
07-11 988
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
【Vue】实现文件下载，导出Excel表格
~~~
11-19 3908
vue实现文件下载。最近项目遇到一个需求，每次都需要根据检索条件将后端请求到的数据在前端进行表格的动态生成展示，并能够点击按钮，实现文件的下载功能，导出为Excel表格。文件下载功能通过向后端发送特定的请求参数来获取相应文件，使用ResponseType Blob来实现文件下载。创建一个a标签，并设置其href属性为一个包含Blob对象的URL，然后模拟用户点击该链接的行为，就可以触发文件下载功能了。
复杂Excel表格转Markdown
kailugaji
03-03 393
由于当前Markdown不具备表达复杂表格的能力，但兼容HTML，因此对于含有跨行合并的Excel表格转Markdown时，可以先将Excel表格导出(另存)为HTML文件，再将HTML源码复制到Markdown即可。
导出xls
newuer的博客
11-27 236
这里写自定义目录标题欢迎使用Markdown编辑器纯手敲导出xls 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 纯手敲导出xls package com.sinitek.sirm.web.stockresearch.job; import com.sinitek.sirm.busin.routine.entity.IMessageReceiver
Markdown 从excel快速复制表格
Difffate的技术随笔
07-12 4350
Markdown支持html，所以表格部分可以用html代码来替换。 如果有合并行，可以考虑和我一样，开始的时候，不使用合并，使用一个特定值，后面再替换 1、复制excel内容，到 http://pressbin.com/tools/excel_to_html_table/index.html 点击convert，转出表格html代码 AA
由 excel 转换为 markdown，及收获
杨贵福 的专栏
12-13 7085
excel 转为 markdown，使用 vbs, sed, elisp.
迅速将MarkDown文件转成doc文件
BlowWw的博客
08-09 1836
迅速将MarkDown文件转成doc文件下载工具pandoc安装转word命令 下载工具pandoc github下载地址：https://github.com/jgm/pandoc/releases 安装 直接安装即可 转word命令 pandoc -s myMd.md -o myWord.docx 通过这句命令就能把myMd.md转成myWord.docx文档啦！ ...
Excel表格转换为MarkDown表格工具
左手coding，右手cooking
08-12 803
https://blog.csdn.net/oDaiLiDong/article/details/88652200
rmarkdown导出为pdf
07-16
要将 R Markdown 导出为 PDF，您可以按照以下步骤操作： 1. 首先，在 RStudio 中打开您的 R Markdown 文件。 2. 确保您已经安装了 `tinytex` 或 `TeX Live` 等 LaTeX 发行版。如果您还没有安装，可以通过运行以下命令来安装 `tinytex`： ```R install.packages('tinytex') tinytex::install_tinytex() ``` 3. 在 R Markdown 文件的 YAML 头部指定输出格式为 PDF。在 YAML 头部中添加如下内容： ```yaml output: pdf_document: latex_engine: xelatex ``` 这里使用了 `xelatex` 引擎，您也可以选择其他引擎。 4. 点击 RStudio 工具栏上的 "Knit" 按钮，即可将 R Markdown 文件导出为 PDF。您也可以使用如下代码进行导出： ```R rmarkdown::render("your_file.Rmd", output_format = "pdf_document") ``` 替换 `"your_file.Rmd"` 为您的 R Markdown 文件路径。 导出完成后，您将在同一目录下找到生成的 PDF 文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值