vue 纯前端导出excel表格

1.安装包

npm install vue-json-excel

2.引入组件

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


局部
import JsonExcel from "vue-json-excel";
 
components: {
    DownloadExcel: JsonExcel,
  },

3.导出

​
​
 <download-excel
                class="export-btn"
                :data="excelDate"
                :fields="jsonFields"
                type="xls"
                header="单"
                name="单.xls"
              >
                <el-button type="primary" plain size="small" style="margin-right: 10px" 
       @click="excelFn()"
                  >导出
                </el-button>
              </download-excel>



​

  data() {
    return {
      excelDate: [],
      jsonFields: {
        //导出Excel表格的表头设置
        系数: 'Factor',
        提示: 'Prompt',
        名称: 'Name',
        说明: 'Desc',
        单价: 'lPrice',
        数量: 'count',
        单位: 'unit',
        总价: 'PriceNew',
      },
      tableData:[]
    
    }
  },
  methods: {
    excelFn() {
      this.shuju()//数据
    },

}