使用vue-json-excel导出Excel文件

vue-json-excel是一款非常好用且方便的VUE Excel插件，下面我们就来学习一下它的基本使用。

一：首先对vue-json-excel进行安装

npm install vue-json-excel -S

二：在项目中进行引用（main.js文件中）

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

三：最后就可以直接在页面中进行使用啦

属性说明

• json_fields：需要导出的字段（可以指定需要导出的字段，如不指定就是默认导出全部字段）

  
  
  image.png

• json_data：需要导出的数据

  
  
  image.png

四：实例演示

<download-excel
    class = "export-excel-wrapper"  // 可以自定义
    :data = "json_data"    // 表格数据
    :fields = "json_fields"  // 表头数据
    name = "订单模板.xls"> // 导出的Excel文件名
    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
  <!-- 这里我使用element-ui的按钮来进行触发 -->
    <el-button type="success" plain>模板下载</el-button>
</download-excel>

data(){
  return {
    json_fields: {   // 数据为JSON格式
        'order_id': 'order_id',  // 这里的表头字段可以自由指定
        'num': 'num',
        'sku_id': 'sku_id'
      },
      json_data: [      // 数据为JSON格式
        {
          'order_id': 'CK20210525000001',
          'num': '6',
          'sku_id': '134729856'
        },
        {
          'order_id': 'CK20210525000002',
          'num': '2',
          'sku_id': '134729878'
        },
        {
          'order_id': 'CK20210525000003',
          'num': '2',
          'sku_id': '134729899'
        }
      ]
  }
}

页面效果

image.png

image.png