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