vue+vue-json-excel实现前端导出excel数据

最新推荐文章于 2024-08-06 14:48:00 发布

LTT1995

最新推荐文章于 2024-08-06 14:48:00 发布

阅读量930

点赞数

文章标签： javascript 深度学习 pytorch

本文链接：https://blog.csdn.net/LTT1995/article/details/121482111

版权

本文介绍了如何在Vue项目中使用npm安装依赖并引入组件，以实现前端导出Excel数据的功能。在实际操作中，需要注意在无数据情况下，初次点击按钮可能会因数据未加载导致导出失败，而第二次点击则能成功获取数据。这可能是由于第二次点击时的数据基于第一次请求的结果。

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

npm安装依赖

npm install vue-json-excel

在需要的使用的组件中引入，也可以在main.js文件中全局引入

import JsonExcel from "../../node_modules/vue-json-excel";
//注册组件
    components: {
   
        JsonExcel,
    },

在项目如何使用

//有数据,无需点击时获取 必需 data ,fields 属性
 <JsonExcel :data="json_data" :fields="json_fields" name="filename.xls" >
     <el-button type="warning">导出excel</el-button>
 </JsonExcel>
 
<script>
export default {
   
     data () {
   
     return{
   
        json_fields: {
   
            'Complete name': 'name',
            'City': 'city',
            'Telephone': 'phone.mobile'