vue之导出数据excel

一、安装 vue-json-excel 依赖

 npm install vue-json-excel --save 

参数列表：

参数	类型	说明	default
data	Array	要导出的数据。
fields	Object	要导出的 JSON 对象中的字段。如果未提供，则将导出 JSON 中的所有属性。
export-fields (exportFields)	Object	用于修复使用变量字段的其他组件（如 vee 验证）的问题。导出字段的工作方式与字段完全相同
type	string	Mime类型[xls, csv]	xls
name	string	要导出的文件名。	data.xls
header	string/Array	数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）
title(deprecated)	string/Array	与标题相同，出于复古兼容性目的，保留标题，但由于与 HTML5 title 属性冲突，不建议使用标题。
footer	string/Array	数据的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）
default-value (defaultValue)	string	当行没有字段值时，用作回退。
worksheet	string	工作表选项卡的名称。	'Sheet1'
fetch	Function	在下载之前回调获取数据，如果它被设置，它会在鼠标按下后和下载之前立即运行。 重要提示:只有在没有定义数据道具的情况下才有效。
before-generate	Function	在生成/获取数据之前调用一个方法，例如:显示加载进度
before-finish	Function	回调在下载框弹出之前调用一个方法，例如:隐藏加载进度
stringifyLongNum	Boolean	字符串化长数字和小数(解决数字准确性损失的问题)，默认值:false
escapeCsv	Boolean	这将转义CSV值，以修复一些数字字段的excel问题。但这会用=" and "包装每个csv数据，为了避免你必须将该道具设置为false。默认值:真正的

 

代码例子：

<template>
　<download-excel
   class = "btn"
   :data = "json_data"
   :fields = "json_fields"
   name = "filename.xls"
　>
    导出Excel表格
  </download-excel>
</template>

<script>
import JsonExcel from 'vue-json-excel' // 引入vue-json-excel
......

  data() {

　　return {

　　　　json_fields: { 

   　　'Complete name': 'name', 
   　　'City': 'city', 
   　　'Telephone': 'phone.mobile', 
　　},

　　json_data: []

  }

  ),

  omponents: {

    JsonExcel
}
......
</script>

 

二、点击导出按钮，浏览器自动下载excel文件。