使用vue-json-excel生成并导出excel

这里我们用到了一个库: vue-json-excel

该库的npm地址:
https://www.npmjs.com/package/vue-json-excel

一. 安装vue-json-excel

npm install vue-json-excel

在main.js中导入此模块

import JsonExcel from "vue-json-excel";

并在Vue对象上绑定此组件

Vue.component("downloadExcel", JsonExcel);

然后就可以直接使用

二 . 使用举例

download-excel就是下载excel的组件, 详细属性见第三节

在此组件中实现的方法是使用HTML表绘制.xls文件，Microsoft Excel不再将HTML识别为本机内容，因此在打开文件之前将显示警告消息, 这不可避免。但是内容将完美呈现。

3. 属性

属性名	类型	描述	默认值
data	数组	要输出的数据
fields	Object	声明要导出的JSON对象中的字段。就像是在制作表头	默认将导出JSON中的所有属性。
export-fields	Object	用于解决其他组件使用可变fields的问题,exportFields的工作原理与fields完全相同
type	字符串	表格类型 [xls, csv]
name	字符串	文件名	data.xls
header	标题	表格的标题
footer	字符串	页脚
default-value	字符串	用于填充空置单元格	''
worksheet	字符串	表单名称	'Sheet1'
fetch	函数	进行回调，以便在下载之前获取数据（如果已设置），则在按下鼠标后以及下载过程之前会立即运行。重要信息：仅在未定义数据属性的情况下有效。
before-generate	函数	回调以在生成/获取数据之前立即调用方法，例如：显示加载进度
before-finish	函数	在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度
stringifyLongNum	布尔	字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false
escapeCsv	布尔	可以转义CSV值，以解决数字字段中的一些问题。

4. 多行值将出现在单个单元格中

包含换行符的单个文本值将在Excel中显示为单个单元格。这避免了多行值被拆分为多个单元格的情况。

5. 按需获取数据