excel流文件前端展示(展示表格)
安装并引入xlsx依赖包npminstall-SxlsximportXLSXfrom'xlsx'excel表格展示>{{tableData.slice((currpage-1)*pagesize,currpage*pagesize)[scope.$index][key]}}
//如果不需要分页,这一段和上面的“tableData.slice...”可以直接换成tableData
从'xlsx'导入XLSX从'axios'导入axios导出默认值{data(){return{currpage:1,pagesize:20,totalNum:0,tableData:[],card:[],//excelsheet的数组cardActive:'',//excel工作簿当前显示的sheet:{},};},mounted(){this.showStandard('Doc/code.xlsx');//通过服务端获取流//this.readFile('code.xlsx')//获取前端public下的excel文件},}获取excel的流文件因为后台文件流是异步获取的.netcore,所以这里用async和await处理//后台获取流文件asyncshowStandard(excelUrl){vartype="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"varfilePaths=[]filePaths.push(excelUrl)letres=awaitthis.$axios.post("/api/Base/DownFileZip",filePaths,{responseType:'arraybuffer'})vardata=newUint8Array(res)varworkbook=XLSX.read(数据,{type:"array"})varsheetNames=工作簿。SheetNames//工作表名称集合this.workbook=workbookthis.card=sheetNamesthis.cardActive=sheetNames[0]this.getTable(sheetNames[0])},//获取前端流文件readFile(url){axios.get(url,{responseType:'arraybuffer'}).then((res)=>{vardata=newUint8Array(res)varworkbook=XLSX.read(data,{type:"array"})varsheetNames=workbook.SheetNames//工作表名称的集合this.workbook=workbookthis.card=sheetNamesthis.cardActive=sheetNames[0]this.getTable(sheetNames[0])})},getTable(sheetName){this.Matches=[]this.currpage=1varworksheet=this.workbook.Sheets[sheetName]this.tableData=XLSX.utils.sheet_to_json(worksheet)//获取第一行(即表头)varheader=XLSX.utils.sheet_to_json(worksheet,{header:1})[0]vartableTitle=this.tableData[0]vartable0={}//这里处理表头,因为获取的数据是根据第一条数据渲染表头的,//当excel文件中第一条数据为空时,第一条数据没有这个属性,数据将不被渲染,所以将空属性设置为“”for(vari=0;i