vue导出excel表格

小张大本事

已于 2022-11-23 16:06:55 修改

阅读量167

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-23 15:40:33 首次发布

本文链接：https://blog.youkuaiyun.com/shunyao6/article/details/128001308

版权

先看效果

一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

三、html部分

<template>
      <download-excel
          class="export-excel-wrapper"
          :data="exportData"
          :fields="fields"
          :header="header"
          name="需要导出的表格名字.xls"
      >
        <el-button type="success">导出</el-button>
      </download-excel>
    </template>

四、data数据部分

data(){
    return{
      header: "excel表格",
      fields: {
        "姓名":'name',
        "地址":'address',
        "性别":'sex',
        "年龄":'age',
        "工作":'work'
      },
      exportData: [
        {
          name: "小张",
          address: "合肥高新区",
          sex: "男",
          age: "23",
          work:"前端开发"
        },

      ],
    }
  },