Javascript

vue 直接将el-table数据导为excel文档

本文主要是介绍vue 直接将el-table数据导为excel文档,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

vue如何实现文件导出:即将表格数据导出为excel文档,实现方法如下

步骤案例讲解
首先需要下载通过下面地址链接下载文件链接:https://pan.baidu.com/s/1v48MnFeqvDIboxix8N-7hg 提取码:f6xh
在这里插入图片描述
然后在src文件下创建一个excel文件,便于后期的一些查找和问题的处理--
最后直接在相应的位置(方法中)使用即可此部分代码看下方代码块this.excelData = this.cycleData // this.export2excel() // this.getDate()

在methods中定义方法
方法一download():按钮点击,数据导出,这里本人是做了一个判断和友好提示,根据个人所需,其中:重点部分代码为

this.excelData = this.cycleData //-------this.cycleData里存放的是将导出的数据,并赋值给this.excelData
this.export2excel() //--------调用Export2Excel.js文件(也就是前面下载的文件之一)
this.getDate() //-------获取当前日期,笔者是为了区别文件的下载日期所需,可不要

		download(){   //`方法:数据导出`
            if(this.work_point ){
                if(this.cycleData.length > 0){
                    this.excelData = this.cycleData
                    this.export2excel()
                    this.getDate()
                }else{
                    this.$notify({
                        title:"温馨提示",
                        type:"warning",
                        message:this.$createElement("i",{style:"color:orange"},"数据为空,无法导出_")
                    })
                }
                
            }else{
                this.$notify({
                    title:"温馨提示",
                    type:"warning",
                    message:this.$createElement("i",{style:"color:orange"},"请先选择导出数据的目标点")
                })
            }
        },

方法二export2excel():表格数据写入excel,

		export2excel(){   //`方法:表格数据写入excel`
            var that = this
            require.ensure( [] , () => {
                const {
                    export_json_to_excel
                } = require("../excel/Export2Excel.js")   //`这里就是前面所说下载的文件的导入(注意路径)`
                
                //`这里对应的是this.cycleData数组中字段名称`
                const tHeader = ["开始时间","起始","终止","距离(m)","填报人","设计面积(㎡)","超挖面积(㎡)","欠挖面积(㎡)","超挖率(%)","超挖率参考标准(%)","欠挖率(%)","欠挖率参考标准(%)","填报人"]    
                //`这里对应的是this.cycleData字段属性----两者要一一对应`
                const fileterVal = ["date_time","start","end","progress_value","editor","desgin_area","overbreak_area","underbreak_area","overbreak_rate","overbreak_rate_ref","underbreak_rate","underbreak_rate_ref","editor"]      
                //`这里的that.excelData就是this.cycleData`
                const list = that.excelData  
                const data = that.formatJson(fileterVal,list)
                //`笔者导出的文件名是:“自定义文件名+日期”,这里的时间就是下载当天的日期,导出的文件名:“自定义文件名2021年5月24日”`
                export_json_to_excel(tHeader, data, "自定义文件名" + this.date_s)   
            })
        },

方法三getDate():获取登录当日时间

		getDate(){  //`方法:获取登录当日时间`
            var date = new Date()
            var year = date.getFullYear()  //`年`
            var monuth = date.getMonth() + 1  //`月`
            var setDay = date.getDate()    //`日`
            this.date_s = year + "年" + monuth + "月" + setDay + "日"   //`例:2021年5月24日`
        },

该问题是笔者前段时间所遇到一个问题,一直没有记录,今天想起来就赶紧记录下,希望能帮助到各位好友。若有不对之处,可技术交流

这篇关于vue 直接将el-table数据导为excel文档的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!