vue-json-excel 导出需要点两次才能导出

可能是因为第一次点击导出时，插件还没有完全加载完成，导致出现了延迟。你可以尝试在插件加载完成后再次点击导出按钮，看看能否解决这个问题。

另外，也可以尝试在代码中使用异步加载的方式来加载插件，这样可以保证插件完全加载完成后再使用。例如：

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

或者使用 `Vue.use` 方法来安装插件：

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.use(JsonExcel)

这样，你就可以直接在组件中使用 `downloadExcel` 组件了，而不需要在每个组件中都引入插件。

相关问题

vue-json-excel函数式导出

Vue-json-excel是一个基于Vue.js的轻量级插件，它允许你在前端使用JavaScript将数据转换成Excel表格并进行下载。这个插件支持函数式API，即你可以直接通过给定的数据源和配置参数，动态生成Excel文件，而无需预先创建DOM元素。

使用Vue-json-excel，你通常会这样做：

1. 首先，在项目中安装该插件：`npm install vue-json-excel --save`
2. 然后在Vue组件中导入并实例化插件：

import Excel from 'vue-json-excel'

export default {
  mounted() {
    this.exportExcel()
  },
  methods: {
    exportExcel() {
      const data = yourData; // 你的数据数组或对象
      const options = { // 根据需求调整导出选项
        filename: 'report.xlsx',
        sheetName: 'Sheet1',
        autoIndex: true,
        // 其他配置...
      }
      Excel.export({data, options}).then(() => {
        // 导出成功后的回调
      }).catch((error) => {
        // 错误处理
      });
    }
  }
}

vue-json-excel导出xlsx

以下是使用vue-json-excel导出xlsx的步骤：

1.首先，安装vue-json-excel依赖包：

npm install vue-json-excel --save

2.在main.js中引入vue-json-excel并注册为全局组件：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JsonExcel from "vue-json-excel"; // 引入vue-json-excel
Vue.component("downloadExcel", JsonExcel); // 注册为全局组件
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')

3.在需要导出Excel的组件中，使用downloadExcel组件并传入数据和表头信息：

<template>
  <div>
    <download-excel
      :data="tableData"
      :columns="tableColumns"
      :filename="'excel文件名'"
      :sheetname="'sheet名称'"
      :title="'表格标题'"
      :autoWidth="true"
      :mergeCell="[]"
    >
      <el-button type="primary">导出Excel</el-button>
    </download-excel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ],
      tableColumns: [
        { label: '姓名', field: 'name' },
        { label: '年龄', field: 'age' },
        { label: '性别', field: 'gender' }
      ]
    }
  }
}
</script>

其中，data为需要导出的数据，columns为表头信息，filename为导出的Excel文件名，sheetname为sheet名称，title为表格标题，autoWidth为是否自动调整列宽，mergeCell为需要合并的单元格信息。