Vue-Json-Excel是一个基于Vue.js的开源JavaScript库,它可以将JSON格式的数据导出为Excel表格。使用Vue-Json-Excel,你可以将你的数据集转换为Excel表格格式,并提供对数据的过滤和排序功能。

Vue-Json-Excel是一个轻量级的插件,具有易用性和高度的灵活性,可以通过设置选项来定制导出文件的外观和格式,比如指定文件名、表格标题、列宽度、数据格式等等。

此外,Vue-Json-Excel还支持导出多个数据集到一个Excel文件中的不同工作表,也可以导出多个工作表到一个Excel文件中。

部署

NPM部署方式

npm install vue-json-excel
import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

使用方法:

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>
data() {
  return {
    json_data: [
    {
      name: "Tony Peña",
      city: "New York",
      country: "United States",
      birthdate: "1978-03-15",
      phone: {
        mobile: "1-541-754-3010",
        landline: "(541) 754-3010",
      },
    },
    {
      name: "Thessaloniki",
      city: "Athens",
      country: "Greece",
      birthdate: "1987-11-23",
      phone: {
        mobile: "+1 855 275 5071",
        landline: "(2741) 2621-244",
      },
    },
  ]
  };
}

相关文档

参数名参数类型描述默认值
dataArray需要导出的数据
fieldsObject要导出的JSON对象中的字段,如果没有提供,JSON中的所有属性将被导出
export-fields (exportFields)Object解决与其他组件的命名冲突问题,用于解决使用变量字段的其他组件(如 vee-validate)的问题。导出字段的工作原来与字段完全相同,
typestring文件类型 xls或者csvxls
namestring导出的文件名称data.xls
headerstring/Array表格的标题。可以是字符串(一个标题)或字符串数组(多个标题)。
title(已弃用)string/Array与header一样,为了向后兼容,我们也保留了title,但不建议使用它,因为它会与HTML5的title属性冲突。
footerstring/Array表格的页脚。可以是字符串(一个页脚)或字符串数组(多个页脚)
default-value (defaultValue)string如果某一行没有字段值时候起作用,当行没有字段值时用作回退
worksheetstring工作表选项卡的名称‘Sheet1’
fetchFunction在点击下载按钮后,开始下载之前执行的函数。回调以获取数据下载之前,如果它被设置设置了,它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据的情况下才有效。
before-generateFunction在生成/获取数据之前调用方法,例如:显示加载进度
before-finishFunction在下载框弹出之前调用方法的回调,例如:隐藏加载进度
stringifyLongNumBoolean字符串化长数字和小数(解决数字精度损失的问题),默认值:falsefalse
escapeCsvBoolean这将转义CSV值,以修复一些excel数字字段的问题。但这会用=” and “包装所有csv数据,以避免你不得不将这个道具设为假。默认值:truetrue

相关链接

GitHub地址:https://github.com/jecovier/vue-json-excel
NPN地址:https://www.npmjs.com/package/vue-json-excel

阿里云盘下载地址

「vue-json-excel.js」 https://www.aliyundrive.com/s/LLK2ojvwGYG