excel表格的上传和下载

excel的表格用到了xlsx插件，

下载npm install xlsx.js

引入 import xlsx from ‘xlsx’

Utils.js写的公共方法

//把文件按照二进制进行读取
export function readFile(file) {return new Promise(resolve => {let reader=new FileReader()reader.readAsBinaryString(file)reader.onload= ev => {resolve(ev.target.result)}})
}// 字段对应表
export let character = {Ticker: {text: 'Ticker',type: 'string'},Platform: {text: 'DataSource',type: 'string'}
}

 //上传的template模板<el-dialog lock-scroll :close-on-click-modal="false" title="File Upload" :visible.sync="dialogVisible" width="30%"><div class="upload"><el-uploadref="upload"actionclass="upload-demo":drag="true"multipleaccept=".xlsx,.xls":limit="limit":auto-upload="false":on-change="handle"><i class="el-icon-upload"></i><div class="el-upload_text">将文件拖到此处，或<em>点击上传</em></div>  </el-upload><div style="text-align:center;margin-top:10px"><el-button type="success" size="small" @click="submit" :disabled="disable" >提交excel表格</el-button></div></div></el-dialog>

上传的方法

import { readFile,delay,character,deepCopy } from '@/utils/utils.js'

上传excel，转为数组对象格式，字段转为后端需要的字段

 //excel表格相关async handle(ev) {let file=ev.rawif(!file) returnconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})// await delay(300)// 读取file中的数据let data=await readFile(file) //二进制数据let workbook=xlsx.read(data, { type: 'binary' } ),worksheet=workbook.Sheets[workbook.SheetNames[0]]data=xlsx.utils.sheet_to_json(worksheet)//把读取出来的数据变为最后可以传递给服务器的数据let arr=[]data.forEach(item => {let obj={}for( let key in character) {if(!Object.prototype.hasOwnProperty.call(character,key)) breaklet v=character[key],text=v.text,type=v.typev=item[text] || '' type === 'string' ? (v=String(v)) : nulltype === 'number' ? (v=Number(v)) : nullobj[key]=v}arr.push(obj)})await delay(1000)this.ImporttableData=arrloading.close()},

提交

async submit() {if(this.ImporttableData.length<=0) {this.$message({message:'请您先选择excel文件!',showClose:true})return} const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})this.disable=true// 完成后处理的事情let complate=() => {this.$message({message:`已经帮您传完${this.IndexNumber}条数据了!`,type:'success',showClose:true})} let errorMsg=() => {this.$message({message:`${this.errMsg}`,type:'error',showClose:true,duration:0})} this.$basisApi.basisRate.ImportRows(this.ImporttableData).then( async(res) => {let { OperatorNumber,ResultMessage }=res.resultlet { status }=restry {if(status===200 || OperatorNumber>-1) {this.IndexNumber=OperatorNumber complate()//  await delay(1000)loading.close()let that=thissetTimeout(() => {that.getData()},1000)} else{this.errMsg=ResultMessage//  await delay(1000)loading.close()errorMsg()} } catch (error) {this.$message(error)}// await delay(2000)this.$refs.upload.clearFiles()this.ImporttableData=[]this.disable=falsethis.dialogVisible=false})},

下载

//下载模板<el-buttontype=""icon="el-icon-download"size="small"style="font-size: 14px;margin-left:10px;"@click="handleExport":disabled="disable"></el-button><el-buttontype=""icon="el-icon-upload"size="small"style="font-size: 14px;"@click="handleUploads"></el-button><el-buttontype=""icon="el-icon-download"size="small"style="font-size: 14px;"@click="handleExportAll":disabled="disable">All</el-button>//table表格<div class="tables"><el-table:data="tableData"style="width: 100%;color:#fff"border:default-sort = "{prop: 'Platform', order: 'descending'}":header-cell-style="tableHeader"@selection-change="selectionchange"><el-table-column fixed type="selection" width="55" align="center"></el-table-             column><el-table-columnsortablev-for="(column, index) in columns":show-overflow-tooltip="true":key="column.prop":prop="dropColumns[index].prop":label="column.label":width="column.width":align="column.align ? column.align : 'center'"></el-table-column><el-table-column  fixed="right" label="Operation"><template slot-scope="scope"><el-buttonsize="mini"type="text"@click="handleEdit(scope.$index, scope.row)"style="color:green">Modify</el-button><el-buttonsize="mini"type="text"@click="handleDelete(scope.$index, scope.row)"style="color:green">Delete</el-button> </template></el-table-column></el-table></div>

选中
selectionchange(val) {this.selecttionList=val
},

导出选中的

npm install xlsx.js插件
import xlsx from 'xlsx'

 //导出相关handleExport() {if(this.selecttionList.length<=0) {this.$message({message:'请您先选择要导出的数据哦！' ,type:'warning',showClose:true})return}this.disable=trueconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})let arr=this.selecttionList.map( item => {return {Ticker:item.Ticker,DataSource:item.Platform,Basis:item.Basis,Term:item.BasisFrequencyUnit,BasisFrequency:item.BasisFrequencyValue,CCY:item.CCY,Tag:item.Tag,RateName:item.RateName,}})let sheet=xlsx.utils.json_to_sheet(arr),book=xlsx.utils.book_new()xlsx.utils.book_append_sheet(book,sheet,'sheet1')xlsx.writeFile(book,`user${new Date().getTime()}.xlsx`)loading.close()this.disable=false},

导出全部的

handleExportAll() {if(this.resData.length<=0) {this.$message({message:'请您先选择要导出的数据哦！' ,type:'warning',showClose:true})return}this.disable=trueconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})let arr=this.resData.map( item => {return {Ticker:item.Ticker,DataSource:item.Platform,Basis:item.Basis,Term:item.BasisFrequencyUnit,BasisFrequency:item.BasisFrequencyValue,CCY:item.CCY,Tag:item.Tag,RateName:item.RateName,}})let sheet=xlsx.utils.json_to_sheet(arr),book=xlsx.utils.book_new()xlsx.utils.book_append_sheet(book,sheet,'sheet1')xlsx.writeFile(book,`exportall${new Date().getTime()}.xlsx`)loading.close()this.disable=false},

excel表格的上传和下载相关推荐

java 上传 excel_Java对Excel表格的上传和下载处理方法
Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...
java中excel上传_java对excel表格的上传和下载处理
Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...
HuTool工具包实现Excel文件的上传、下载以及修改文件名称
加载依赖文件 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</ar ...
生成Excel表格并上传阿里云存储
1.程序内部生成Excel表格 1.1 表头和数据分离 //表头存储格式 List<String[]> headerGoodsOrderListString[] h1 = new Stri ...
sap中Excel的模版上传和下载
一:所用到的事物码: smw0 二:上传步骤三:下载代码 TABLES:sscrfields. *定义OLE变量 DATA:g_excel TYPE ole2_object, g_appl ...
thinkphp6 使用PhpOffice导入Excel表格（上传文件）
导入表格样式注意这里的button的id与js中的#elem需要对应 <form enctype="multipart/form-data" action="&q ...
java查询结果传入excel表格批量上传并压缩下载
service层方法 //文件路径private String outputAddr="/home/appdata/files"; //表格表头private static fin ...
vue实现Excel文件的上传与下载
参考:https://www.cnblogs.com/wnxyz8023/p/11101771.html 转载于:https://www.cnblogs.com/Samuel-Leung/p/1110 ...
Excel 上传和下载
前言相信很多前端小伙伴在开发后台管理系统的时候都会遇到这样的需求,上传或者下载 excel 表格:为什么会出现这样的需求呀,因为我们知道后台管理系统中莫非功能就是查看,删除,修改,添加,但是所谓的添 ...

excel表格的上传和下载

excel表格的上传和下载

excel表格的上传和下载相关推荐

最新文章

热门文章