专栏首页前端开发随笔vue-json-excel导出excle表格

vue-json-excel导出excle表格

文档地址

名称

类型

描述

默认值

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

数据标题。可以是一个字符串(一个标题)或一个字符串数组(多个标题)。

footer

string/Array

数据的页脚。可以是一个字符串(一个页脚)或一个字符串数组(多个页脚)。

default-value (defaultValue)

string

当行没有字段值时,用作备用。

worksheet

string

工作表选项卡的名称。

‘Sheet1’

fetch

Function

进行回调,以在下载之前获取数据(如果已设置),则在按下鼠标后以及下载过程之前立即运行。重要信息:仅在未定义数据属性的情况下有效。

before-generate

Function

在生成/获取数据之前回调以调用方法,例如:显示加载进度

before-finish

Function

在下载框弹出之前进行回调以调用方法,例如:隐藏加载进度

stringifyLongNum

Boolean

字符串化长整数和十进制(解决数字精度丢失的问题),默认值:false

false

escapeCsv

Boolean

这样可以转义CSV值,以解决数字字段中的一些excel问题。但这将用=“和”包裹每个csv数据,以避免您必须将此prop设置为false。默认值:True

true

安装

npm install vue-json-excel

组件导出

import JsonExcel from "vue-json-excel";
  components: {
    "download-excel": JsonExcel,
  },

完整代码

<template>
  <div class="box">
    <download-excel
      :fields="fields"
      :data="tableData"
      name="用户数据"
      type="xls"
    >
      <el-button type="primary" icon="el-icon-download">导出表格</el-button>
    </download-excel>
  </div>
</template>

<script>
import JsonExcel from "vue-json-excel";
export default {
  components: {
    "download-excel": JsonExcel,
  },
  data() {
    return {
      tableData: [],
      fields: {
        日期: "date",
        姓名: "name",
        省份: "province",
        市区: "city",
        地址: "address",
        邮编: "zip",
      },
    };
  },
  mounted() {
    this.moreData();
  },
  methods: {
    moreData() {
      var list = [];
      for (let i = 0; i < 50; i++) {
        list.push({
          date: "2016-05-02",
          name: "王小虎" + i,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200000,
        });
      }
      this.tableData = list;
    },
  },
};
</script>
<style lang="less" scoped>
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue版本更新清除浏览器缓存

    wePanda
  • 微信小程序swiper显示左右两边内容

    wePanda
  • Dart常用的数据类型

    wePanda
  • 【优化2】整数优化

    概述 IP类型 建立IP 逻辑型 或的逻辑约束 三个选择的或 只有才 更多或 整数可除 多边形组合 固定花费 分段线性 组合型 set covering set...

    用户1147754
  • 3小时带你开发一款商城类小程序(零基础入门小程序系列)

    首先声明一点:即便你没有一点点编程基础,也可以跟着这套课程来入门小程序开发。因为本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不...

    编程小石头
  • MobSF 框架及源代码分析

    MobSF,全称(Mobile-Security-Framework),是一款优秀的开源移动应用自动测试框架。该平台可对安卓、苹果应用程序进行静态、动态分析,并...

    小老鼠
  • 前端实现文件下载功能的三种方式

    已知文件的地址,可以通过上面的方式将地址放入href属性内,download属性存放下载文件的名称,此属性为必须。

    acoolgiser
  • JavaScript设计模式之工厂模式

    工厂模式是一种最常用的实例化对象模式,是用工厂方法代替new操作的一种模式。在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口...

    用户6167509
  • 实时同步MongoDB Oplog开发指南

    joymufeng
  • 项目总览表

    张树臣

扫码关注云+社区

领取腾讯云代金券