使用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

四：实例演示

 // 导出的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