vue导出excel

yuyu_2019

已于 2023-03-22 12:48:16 修改

阅读量66

点赞数

分类专栏： VUE 文章标签： vue.js excel javascript

于 2023-03-22 12:38:24 首次发布

本文链接：https://blog.csdn.net/yuyu_2019/article/details/129706686

版权

VUE 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue项目中安装和使用vue-json-excel库来导出数据到Excel文件。主要步骤包括导入组件，配置数据字段和表格数据，以及在模板中创建导出按钮。数据结构包含日期、姓名和地址等字段。

摘要由CSDN通过智能技术生成

安装

npm install vue-json-excel

main.js引入

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

导出按钮

<download-excel class="export-excel-wrapper"
                    :data="json_data"
                    :fields="json_fields"
                    :name="tableDialog.header+'.xls'"
                    :header="tableDialog.title">
      <img src='../../assets/export.png'
           width="24"
           height="24">
    </download-excel>

data () {
    return {
      json_fields: {
        "日期": "date",
        "姓名": "name",
        "地址": "address"
      },

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    };