vue elementui 导出excel

1、命令执行

npm install vue-json-excel

2、ts 引用

import JsonExcel from "vue-json-excel";
@Component({
  name: 'tc-actual-production',
  template: require('./productionActual.template.html'),
  components: {pagination,
    'download-excel':JsonExcel
  }
})

3、html 

        <download-excel
          class = "export-excel-wrapper"
          :data = "json_data"
          :fields = "json_fields"
          header="生产实绩统计"
          name = "生产实绩统计.xls">
          <el-button type="primary" size="small">导出EXCEL</el-button>
        </download-excel>

如果放在 其他按钮后面，需要和其他按钮一排，只需要设置   display：inline  就可以了

4、ts  

设置两个变量的值：

json_fields：列名

json_data：数据

 json_fields:any={
    '列名1': "col1",
    '列名2': "col2",
    '列名3': "col3"  
}
json_data:any[]= [{
  'col1': "内容1",
    'col2': "内容2",
    'col3': "内容3"  
}]

效果：

 

 组件文档：

Name	Type	Description	Default
data	Array	Data to be exported.
fields	Object	Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported.
export-fields (exportFields)	Object	Used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	Mime type [xls, csv]	xls
name	string	File name to export.	data.xls
header	string/Array	Title(s) for the data. Can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	same as header, title is maintained for retro-compatibility purposes but its use is not recommended due to the conflict with the HTML5 title attribute.
footer	string/Array	Footer(s) for the data. Can be a string (one footer) or an array of strings (multiple footers).
default-value (defaultValue)	string	Use as fallback when the row has no field values.	''
worksheet	string	Name of the worksheet tab.	'Sheet1'
fetch	Function	Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined.
before-generate	Function	Callback to call a method right before the generate / fetch data, eg:show loading progress
before-finish	Function	Callback to call a method right before the download box pops out, eg:hide loading progress
stringifyLongNum	Boolean	stringify long number and decimal(solve the problem of loss of digital accuracy), default: false
escapeCsv	Boolean	This escapes CSV values in order to fix some excel problems with number fields. But this will wrap every csv data with =" and ", to avoid that you have to set this prop to false. default: True

属性名 
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值，以解决数字字段中的一些问题。