vue把表格数据导出excel类型文件

球球和皮皮

已于 2023-05-05 11:16:28 修改

阅读量637

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-07 10:35:55 首次发布

本文链接：https://blog.csdn.net/weixin_40252368/article/details/128588147

版权

这篇博客介绍了如何在Vue.js项目中实现将表格数据导出为Excel文件的功能。作者展示了简单的界面样式和具体的方法实现，包括需要引入的外部JS文件，最终生成包含三个Sheet的Excel文件。

摘要由CSDN通过智能技术生成

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。

🐈‍⬛ 两只猫🐱和一只狗的铲屎官🐶

🧣 微博: GuoJ阝阝（fu）

前言

最近有这样一个需求：
需要把页面中的表格数据导出为excel类型的文件。

做完的效果大概是这样：
在这里插入图片描述

这里记录一下处理方法。

提示：以下是本篇文章正文内容，下面案例可供参考

一、界面样式

<div class="judged-message" style="height: calc(100% - 80px)">
      <el-table :data="finishStatusTable" tooltip-effect="dark" ref="selection" class="selectionClass" border style="overflow: auto" :key="updateCompleteTask">
        <el-table-column prop="TaskID" label="申请ID" align="center"></el-table-column>
        <el-table-column prop="PublisherName" label="申请来源" align="center"></el-table-column>
        <el-table-column prop="TaskType" label="处理类型" align="center"></el-table-column>
        <el-table-column prop="ApplyTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="JudgeTime" label="处理时间" align="center"></el-table-column>
        <el-table-column prop="VerdictType" label="处理方式" align="center"></el-table-column>
        <el-table-column prop="VerdictResult" label="处理结果" align="center"></el-table-column>
      </el-table>
    </div>
    <div class=