美文网首页
vue前端实现导出表格

vue前端实现导出表格

作者: 变量只提升声明不提升赋值 | 来源:发表于2020-12-25 14:28 被阅读0次

    第一种方法:
    首先安装两个依赖
    1.npm install -S file-saver xlsx

    2.npm install -D script-loader

    然后下载两个文件 下载地址http://files.cnblogs.com/files/wangyunhui/vendor.rar

    将这两个文件加入项目中,新建一个文件夹,我这里叫vendor


    image.png

    在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的
    resolve的alias中加入:
    'vendor':path.resolve(__dirname,'../src/views/account/vendor'), 此处路径写你自己真实的文件路径

    vue3.0以上的项目放在 image.png
    image.png
    vue.config.js
    
    module.exports = {
    configureWebpack() {
        return {
          resolve: {
            alias: {
              '@': resolve('src'),
              vendor: path.resolve(
                __dirname,
                'src/views/orderManagement/successOrder/vendor'
              ),
            },
          },
        }
      },
    }
    

    路径一定要正确,不然等会儿启动项目会报错
    接下来写点击事件 在导出的按钮上绑定个点击事件
    首先要去调后台接口获取这些数据,这个事件就不写了。
    下面是生成表格的方法,在拿到后台数据后调用此方法即可

    methods: {
     
          export2Excel() {
     
            require.ensure([], () => {
     
              const { export_json_to_excel } = require('vendor/Export2Excel');
     
              const tHeader =
     
                ['账单名称', '订单编号', '交易编号','交易类型',
     
                  '交易方式','交易金额','交易前金额', '交易后金额'
     
                ];  //创建表头
     
              const filterVal =
     
                ['transactionName', 'orderNum','transactionNum','transactionTypeName',
     
                 'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',
     
                ]; //这里是和表头对应的内容的字段,要和后台返回的数据的字段对应上
     
     
     
              const list = this.exportList;  //这是从后台拿到的数据
     
              const data = this.formatJson(filterVal, list);
     
              export_json_to_excel(tHeader, data, '**报表'); //三个参数,表头,经过排序后的数据,表格的名字
     
            })
     
          },
     
          formatJson(filterVal, jsonData) {
     
            return jsonData.map(v => filterVal.map(j => v[j]))
     
          },
    }
    

    第二种:
    利用 vue-json-excel 插件到处

    npm  install vue-json-excel --save
    
    全局引入或者局部引入都可以,下面例子为全局引入
    import JsonExcel from 'vue-json-excel'
    Vue.component('downloadExcel',JsonExcel )
    

    页面使用

    /**
     * data:表格数据  fields:表头 name:表格名称
    */
    <download-excel  :data="dataList" :fields="json_fields"  worksheet="My Worksheet" name="表格名称">导出明细列表</download-excel>
    
    
    json_fields: {  //导出Excel表格的表头设置
                    '姓名':'name',
                    '年龄':'age',
                                '性别':'sex',
    },
    dataList:[
    {
      name:'张三',
    age:'18',
    sex:'男'
    },
    {
      name:'张三',
    age:'18',
    sex:'男'
    },
    {
      name:'张三',
    age:'18',
    sex:'男'
    },
    ]
    
    

    以上即可实现前端的导出表格功能。数据量过于庞大还是建议后端实现导出。

    相关文章

      网友评论

          本文标题:vue前端实现导出表格

          本文链接:https://www.haomeiwen.com/subject/qanbnktx.html