在项目开发时免不了有时会用到表格数据导出Excel的功能，那么我们可以使用vue-json-excel来实现此功能，而且vue-json-excel使用起来非常简单。
官方地址：vue-json-excel - npm
主要参数：
| Name | Type | Description | Default |
| data | Array | 要导出的数据。 |
|
| fields | Object | 要导出的 JSON 对象内的字段。如果未提供，则 JSON 中的所有属性都将被导出。 |
|
| export-fields (exportFields) | Object | 用于解决使用变量字段的其他组件的问题，例如 vee-validate。exportFields 的工作方式与字段完全相同 |
|
| type | string | Mime 类型 [xls, csv] |
xls |
| name | string | 要导出的文件名。 |
data.xls |
| header | string/Array | 数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。 |
|
| title(deprecated) | string/Array | 与标头相同，保留标题是出于复古兼容性目的，但由于与 HTML5 标题属性冲突，不建议使用它。 |
|
| footer | string/Array | 数据的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）。 |
|
| default-value (defaultValue) | string | 当行没有字段值时用作后备。 |
'' |
| worksheet | string | 工作表选项卡的名称。 |
'Sheet1' |
| fetch | Function | 下载前回调以获取数据，如果已设置，则在按下鼠标后和下载过程之前立即运行。 重要提示：仅在未定义数据道具时才有效。 |
|
| before-generate | Function | 在生成/获取数据之前回调调用方法，例如：显示加载进度 |
|
| before-finish | Function | 在下载框弹出之前回调调用方法，例如：隐藏加载进度 |
|
| stringifyLongNum | Boolean | stringify long number and decimal(解决丢失数字精度的问题)，默认：false |
|
| escapeCsv | Boolean | 这会转义 CSV 值，以解决数字字段的一些 excel 问题。但这将用="和"包装每个 csv 数据，以避免您必须将此道具设置为 false。默认值：真 |
安装、配置
npm install vue-json-excel
接下里在main.js中进行全局配置
import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel)
开始使用
运行界面
核心代码
我这边是前后端分离的项目，直接调用接口API来获取列表数据，然后返回。
注意：我这里因为自己的界面样式需要才这样改的，你开发时根据自己的界面情况来定义样式。
.export-excel { display: inline !important; }
<download-excel class="export-excel"//样式自己定义 :fields="json_fields" :fetch = "fetchData" title="用户统计" name="统计列表.xls"> <el-button type="primary" size="mini" round> 导出Excel </el-button> </download-excel>
export default { data() { return { json_fields: { 姓名: "memberName", // 这里的表头字段可以自由指定 会员号: "memberNum", 性别: "memberSex", 年龄: "memberAge", 注册日期: "date", 电话: "phone", 审核状态: "status", 地址: "memberAddr" }, json_meta: [ [ { " key ": " charset ", " value ": " utf- 8 " } ] ] } }
methods: { async fetchData(){ const response = await this.axios.post('/api/member/list'); console.log(response); return response.data; } }
效果如下图：
