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