VUE中导出Excel功能的实现

前端的小小对象

墨衍会员 · AI 创作全网分发码龄11年

关注

原创最新推荐文章于 2026-07-04 13:26:47 发布 5.6k 阅读 AI 写同款· GEO 优化 ›

Vue导出Excel的实现方法与原理本文将详细介绍前端Vue中导出Excel的方法，包括使用第三方库和纯前端实现两种方式。同时解释其原理，帮助读者了解如何在Vue项目中高效地导出Excel文件。阅读详情

一、在上一篇文章中我们已经完成了WebSql的操作，并且初始化了一些数据，那么如何导出这些数据呢？

**当然方法有多种，本次我们采用引入Export2Excel.js的方法

1、添加所需依赖

npm install file-saver
npm install xlsx
npm install script-loader

2、在src目录下新建一个文件夹，里面放入本次功能需要的文件：Blob.js和 Export2Excel.js（这两个文件可自行百度下载）

需要注意的是：Export2Excel.js中，顶部的路径需要根据自己的配置修改

3、在需要此功能的页面引入，注意路径（当然可以做成通用的方法，此处不做赘述）

3、调用此方法，本次我们使用上一篇文章中创建的数据库中的数据作为演示

        //格式化
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        //获取城镇数据
      	GetCityList:function(){
          var that=this;//与this区别开
          that.ExportList=[];
          this.$db.transaction(function(tx){
            tx.executeSql("select * from City",[],function(tx,res){
                for(var i=0;i<res.rows.length;i++){
                    that.ExportList.push(res.rows[i]);
                }
                that.getExcel_city(that.ExportList);
              },function(tx,err){
                console.log(err);
              }
            );
          });		
        },
        //导出城镇方法
        getExcel_city(res) {
            require.ensure([], () => {
                const tHeader = ['编码', '名称']
                const filterVal = ['CityID', 'Name']
                const list = res
                const data = this.formatJson(filterVal, list)
                export_json_to_excel(tHeader, data, '城镇列表')
            })
        },

4、绑定到按钮上，点击按钮，可以导出excel：

二、介绍第二种方法：vue-json-excel

1、首先引入依赖

npm install vue-json-excel

2、在main.js中引用此方法

//引入导出excel组件方法
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、在需要使用此功能的页面中直接调用

//json_data为数据源List，json_fields为表头信息和取值逻辑
 <button :data="json_data" :fields="json_fields" name="UserInfo">点击导出</button>

        //表头为User_Name、City、phone、remark
        //取值逻辑为：User_Name取字段name
        //City取info中的city
        //phone取phone中的landline（拼接后）
        //remark取info中的remark（拼接后）
        json_fields: {
          "User_Name": "name", //常规字段
          "City": "info.city", //支持嵌套属性
          "phone": {
            field: "phone.landline",
            callback: value => {//自定义回调函数
              return `Landline Phone - ${value}`;//拼接返回值
            }
          },
          "remark": {
            field: "info.remark",
              callback: value => {
                  return `Reamrk:  ${value}`;
              }
          }
        },
        //测试数据
        json_data: [
          {
            name: "张三",
            info:{
                city: "New York",
                country: "EN",
                remark:"测试1"
            },
            phone: {
              mobile: "1",
              landline: "11"
            }
          },
          {
            name: "李四",
            info:{
                city: "BeiJing",
                country: "CN",
                remark:"测试2"
            },
            phone: {
              mobile: "2",
              landline: "22"
            }
          },
           {
            name: "王二",
            info:{
                city: "Nanjing",
                country: "CN",
                remark:"测试3"
            },
            phone: {
              mobile: "3",
              landline: "33"
            }
          }
        ],
        //数据格式
        json_meta: [
          [{
            " key ": " charset ",
            " value ": " utf- 8 "
          }]
        ]

4、导出结果