1、安装依赖cnpmixlsx--D2，在某个模块中importXLSXfrom'xlsx'或者全局importXLSXfrom'xlsx'3、importexcelcommonjs(publicfunction)/***1,String.fromCharCode(65+i)+1:A1,B1,C1....*2,String.fromCharCode(65+j)+(i+2)A2,B2,C2...*A3,B3,C3...*测试:*constheaders=[{key:'date',title:'date'},{key:'name',title:'name'}]*constdata=[{date:'2019-05-31',名称：'梅根。huang'},{date:'2019-06-20',name:'小明'}]*console.log(exportJsonToExcel(headers,data))*使用xlsx插件导出json数据到Excel----forTabledata*@param{Array}headersheader:[{key:'date',title:'date'},{key:'name',title:'name'}]*@param{Array}数据主体data:[{date:'2019-05-31',name:'megen.huang'},{date:'2019-06-20',name:'小明'}]*@param{String}fileName导出文件name:'export.xlsx'*/exportfunctionexportJsonToExcel(headers=[],data=[],fileName='export.xlsx'){//先处理数据data=handleCSV(data)const_headers=headers.map(（项目，我）=>Object.assign({},{key:item.key,title:item.title,position:String.fromCharCode(65+i)+1})).reduce((prev,next)=>Object.assign({},prev,{[next.position]:{key:next.key,v:next.title}}),{})const_data=data//二维数组.map((item,i)=>headers.map((key,j)=>Object.assign({},{content:item[key.key],position:String.fromCharCode(65+j)+(i+2)})))//twoDimensionaltoone-dimensional.reduce((prev,next)=>prev.concat(next))//转成worksheet需要的数据结构.reduce((prev,next)=>Object.assign({},prev,{[next.position]:{v:next.content}}),{})//组合标题和数据constoutput=Object.assign({},_headers,_data)console.log('output',output)//获取所有单元格的位置constoutputPos=Object.keys(output)//计算范围，["A1",...,"H2"]constref=`${outputPos[0]}:${outputPos[outputPos.length-1]}`console.log('ref',ref)//构造工作簿对象constwb={SheetNames:['mySheet'],Sheets:{mySheet:Object.assign({},output,{'!ref':ref,'!cols':headers.map(item=>({wpx:120}))//屏幕像素宽度})}}//导出ExcelXLSX.writeFile(wb,fileName)}//防止CSV注入处理exportfunctionhandleCSV(arr){constreg=newRegExp('(^=|^-)')if(Array.isArray(arr)&&arr.length>0){for(constitemofarr){Object.keys(item).forEach(key=>{if(item[key]&®.test(item[key])){item[key]='\''+item[key]}})}}returnarr}/***日期格式转换*`第一个参数是传入的时间戳，单位是毫秒，第二个参数是格式，具体见代码；*如果不传参数，则返回当前日期，并以“'yyyy,MM,dd,year'”的格式显示。`*@param{object}_dateDate*@param{string}_format转换后的日期格式*/exportfunctionFormatDate(_date,_format){if(_format&&!_date){return''}vardate=_date||新日期（）var格式=_格式||'yyyy/MM/dd'date=newDate(_date)varmap={M:date.getMonth()+1,//月d:date.getDate(),//日h:date.getHours(),//小时m:date.getMinutes(),//分s:date.getSeconds(),//秒q:Math.floor((date.getMonth()+3)/3),//季节S:date.getMilliseconds()//秒}format=format.replace(/([yMdhmsqS])+/g,function(all,t){varv=map[t]if(v!==undefined){if(all.length>1){v='0'+vv=v.substr(v.length-2)}returnv}elseif(t==='y'){return(date.getFullYear()+'').substr(4-all.length)}returnall})returnformat}html从Excel导入
jsimport{exportJsonToExcel,deepClone,FormatDate}from'@/utils'data(){return{outJson:[],//最后要发送给后台的json数据//导入header必填字段excelHeaderRequired:['序列号（必填）','子任务名称（必填）','子任务内容（必填）','执行者（必填）','预计开始时间（必填）','预计完成时间（必填）','紧急程度（必填）'],exportHeader:Object.freeze([{key:'index',title:'序列号'},{key:'workItem',title:'项目名称'},{key:'taskName',title:'子任务名称'},{key:'remark',title:'子任务内容'},{key:'执行者',title:'执行者'},{key:'planStarttime',title:'预计开始时间'},{key:'planEndtime',title:'预计完成时间'},{key:'actualStarttime',title:'实际开始时间'},{key:'actualEndtime',title:'实际完成时间'},{key:'tagList',title:'标签'},{key:'orderNum',title:'Urgency'},{key:'taskProgress',title:'工作进度'}]),order:Object.freeze({'urgency':0,'Normal':1,'ImportantUrgent':2}),orderObj:Object.freeze({0:'Urgent',1:'General',2:'ImportantUrgent'}),}}methods:{beforeAvatarUpload(file){if(!file){//没有文件返回false}elseif(!/\.(xls|xlsx)$/.test(file.name.toLowerCase())){//格式根据自己的需要定义。this.$message.error('上传格式不正确，请上传xls或xlsx格式')returnfalse}this.handleExcel(file)//处理数据this.$refs.upload.clearFiles()},handleExcel(file){//表导入constfiles=file//excel文件constfileReader=newFileReader()fileReader.onload=ev=>{try{constdata=ev.target.resultconstworkbook=XLSX.read(data,{type:'binary',cellDates:true})constwsname=workbook.SheetNames[0]//取第一个表consttempArr=XLSX.utils.sheet_to_json(workbook.Sheets[wsname])//生成json表的内容,如果某个字段列没有填,则不会解析出来console.log('Analyzeddata',tempArr)this.outJson=[]letisValidPass=truefor(constitemoftempArr){console.log('severaltimes',item)constobj={}constbool=this.validFieldRequired(item)if(!bool){//如果不为真，一些The必填字段未填写isValidPass=falsebreak}constisValidSuccess=this.handleoutJson(item,obj)if(!isValidSuccess){isValidPass=falsebreak}else{this.outJson.push(this.successObj)//this.outJsonput需要返回后台什么}}if(isValidPass){//如果this.outJson有数据，说明所有校验成功，可以传给后台batchSaveTask(this.outJson).then(res=>{this.$message.success('导入成功')this.init()}).catch(e=>{})}}catch(e){console.log(e)returnfalse}}fileReader。readAsBinaryString(files)},//检查必填字段的值是否存在validFieldRrequired(item){letboolean=truefor(constelofthis.excelHeaderRequired){if(!Object.keys(item).includes(el)){this.$message.error(`${el}`)布尔值=falsebreak}}returnboolean},//将解析后的json转成后台需要的字段handleoutJson(item,obj){//if(item['itemname(required)']){//}this.successObj={}obj['matterId']=this.$route.query.idobj['taskName']=item['子任务名称（必填）'].trim()obj['remark']=item['subtaskcontent(required)'].trim()//人员需要传三个参数obj['executorAccount']=item['executor(required)'].trim()obj['executorId']=''obj['executor']=''if(!DataType(item['预计开始时间(必填)'],'date')){this.$message.error('预计开始时间格式不符合')returnfalse}if(!DataType(item['预计完成时间(必填)'],'date')){this.$message.error('预计结束时间格式不符合')returnfalse}if(item['预计开始时间（必填）']>item['预计完成时间（必填）']){this.$message.error('预计开始时间不能晚于预计结束时间')returnfalse}else{//需要处理的时间obj['planStarttime']=FormatDate(item['预计开始时间(必填)'],'yyyy-MM-ddhh:mm:ss')//需要处理的时间obj['planEndtime']=FormatDate(item['预计完成时间（必填）'],'yyyy-MM-ddhh:mm:ss')}console.log(item['预计开始时间(必填)'],item['预计完成时间(必填)'])if(item['紧迫性(必填)']&&Object.keys(this.order).includes(item['urgency(required)'].trim())){//需要把汉字转成key传过去obj['orderNum']=this.order[item['Urgency(required))'].trim()]}else{this.$message.error('任务级别不存在')returnfalse}this.successObj={...obj}returntrue},}4,exportexceljs//exportexportMatter(type,tag){if(type==='1'&&this.completeList.length>0){//这里深拷贝防止污染原始数据constarr=deepClone(this.completeList)//需要处理数据constsourceData=arr.map((item,index)=>{item['index']=index+1item['tagList']=this.tagsText(item.tagList)item['orderNum']=this.orderObj[item.orderNum]item['planStarttime']=item.planStarttime?FormatDate(item.planStarttime,'yyyy/MM/ddhh:mm:ss'):''item['planEndtime']=item.planEndtime?FormatDate(item.planEndtime,'yyyy/MM/ddhh:mm:ss'):''item['actualStarttime']=item.actualStarttime?FormatDate(item.actualStarttime,'yyyy/MM/ddhh:mm:ss'):''item['actualEndtime']=item.planStarttime?FormatDate(item.actualEndtime,'yyyy/MM/ddhh:mm:ss'):''Object.keys(item).forEach(key=>{item[key]=item[key]===null?'':item[key]})returnitem})exportJsonToExcel(this.exportHeader,sourceData,'exportSubTask.xlsx')}else{this.$message.error('没有可导出的已完成任务')}},
