vue采用 XLSX文件上传与下载

先安装xlsx

npm install xlsx

安装之后直接在该页面script标签里面导入

import * as XLSX from ‘xlsx’

注意此处不用再去其他地方再做配置了

上传

采用elment组件el-upload

 <el-uploadaccept=".xlsx, .xls":file-list="fileList":before-upload="beforeUploadFile":on-exceed="exceedFile":on-success="uploadSuccess":show-file-list="false"multiple:limit="1"style="margin: 0px 24px 5px 24px"><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":show-close="false">此处设置的dialogText目的是为了记录导入表之前对应的table是否为空，而展示出不同的提醒<span>{{this.dialogText}}</span><span slot="footer" class="dialog-footer"><el-button @click.stop="dialogVisible = false">取 消</el-button><el-button type="primary" @click.prevent="dialogVisible = false">确 定</el-button></span></el-dialog><el-buttonstyle="left: 0px"@click.stop="dialogVisible = true">导入Excel</el-button></el-upload>

对应的methods

 // 1.文件上传相关// 1.1 beforeUploadFile文件上传之前的钩子beforeUploadFile (file) {//此处传入的file其实也就是el-upload组件中绑定的:file-list// 1.1.1 校验文件名var FileExt = file.name.replace(/.+\./, '')if (['xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {this.$message({type: 'warning',message: '请上传后缀名为xls、xlsx的附件！'})return false}// 1.1.2 校验file.size上传文件大小 以字节为单位this.isLt2k = file.size / 2048 < 100 ? '1' : '0'if (this.isLt2k === '0') {this.$message({message: '上传文件大小不能超过100k!',type: 'error'})} else {//  1.1.3 excel转化为需要的jsonvar reader = new FileReader()reader.readAsBinaryString(file)reader.onload = (ev) => {var data = ev.target.resultvar workbook = XLSX.read(btoa(data), { type: 'base64' })var workbookjson = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]],{ range: 1, defval: '', raw: false })//range值为0对应的是从第一行开始上传，并且第一行会解析为json对应的属性名，因为我的excel第一行是中文的，第二行设置的英文字段，所以range设置为1// 1.1.4 发请求以及上传后 拿到返回后的数据的处理this.$axios.post('/api/users/queryExcel', JSON.stringify(workbookjson)).then((res) => {//此处是我自己对应处理的数据逻辑 可以略过var resdata = res.data.dataif (resdata) {var i = 1this.resData = resdata.map((e) => {e.index = i++return e})this.querydata = this.resDatathis.total = resdata.lengththis.queryPagesData = this.querydata.slice(0, 10)this.$message({ type: 'success', message: '文件上传成功' })this.dialogText = '注意：表中已有数据，再次上传会覆盖原列表！'} else {this.$message.warning(`文件导入失败`)}})}}},// 1.2 exceedFile文件超出个数时的钩子exceedFile (files, fileList) {this.$message.warning(`只能选择1个文件，当前共选择了 ${files.length} 个`)},

下载

<el-buttontype="primary":loading="false"@click="handleExcel"style="left:0px">导出excel</el-button>

handleExcel () {// this.querydata为对应的table导出来的list只有英文的属性没有对应的中文表头，所以需要在第二个参数配置表头 this.listHandersxlsxTran(this.querydata, this.listHander, '下载excel')},// 导出excel封装的函数
function xlsxTran (json, fields, filename = '.xlsx') {// 导出xlsxjson.forEach((item) => {for (let i in item) {if (fields.hasOwnProperty(i)) {item[fields[i]] = item[i]}delete item[i] // 删除原先的对象属性}})let sheetName = filename // excel的文件名称let wb = XLSX.utils.book_new() // 工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) // 将JS对象数组转换为工作表。wb.SheetNames.push(sheetName)wb.Sheets[sheetName] = wsconst defaultCellStyle = {font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },fill: { fgColor: { rgb: 'FFFFAA00' } }} // 设置表格的样式let wopts = {bookType: 'xlsx',bookSST: false,type: 'binary',cellStyles: true,defaultCellStyle: defaultCellStyle,showGridLines: false} // 写入的样式let wbout = XLSX.write(wb, wopts)let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })fs.saveAs(blob, filename + '.xlsx')
}const s2ab = (s) => {var bufif (typeof ArrayBuffer !== 'undefined') {buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf} else {buf = new Array(s.length)for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xffreturn buf}
}

vue采用 XLSX文件上传与下载相关推荐

Vue前后端的上传和下载模块以及遇到的问题
最近在写VUE的上传和下载记录一下遇到的问题 1.上传部分 2.前端页面下载后端上传后端上传和普通其他的上传一个可以采用普通的文件上传方式就行 @PostMapping("/pic&q ...
文件上传，下载，预览，删除（File），分页接口
文件上传,下载,预览,删除(File) 1.公共参数方法 1.1公共返回类型定义 1.2 分页接口 1.3公共实体类 1.4 公共的 mapper.java/xml(都放在一起) 1.4.1 File ...
SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎收藏转发分享专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...
java使用Jsch实现远程操作linux服务器进行文件上传、下载，删除和显示目录信息...
1.java使用Jsch实现远程操作linux服务器进行文件上传.下载,删除和显示目录信息. 参考链接:https://www.cnblogs.com/longyg/archive/2012/06/2 ...
SpringBoot+MongoDB GridFS文件上传、下载、预览实战
SpringBoot + MongoDB GridFS 随着web 3.0的兴起,数据的形式不局限于文字,还有语音.视频.图片等.高效存储与检索二进制数据也成为web 3.0必须要考虑的问题.然而这种 ...
黑马瑞吉外卖之文件上传和下载
黑马瑞吉外卖之文件上传和下载文件上传的前端页面我们使用到的是spring-web对上传代码的一个封装. 我们采用到一个上传的前端页面这里采用到的前端页面主要部分就是 ---- <body&g ...
SpringBoot下文件上传与下载的实现
原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...
[转载]ASP.NET Core文件上传与下载(多种上传方式)
ASP.NET Core文件上传与下载(多种上传方式) 前言前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在整理 ...
JavaWeb学习总结(五十)——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

vue采用 XLSX文件上传与下载

vue采用 XLSX文件上传与下载

上传

下载

vue采用 XLSX文件上传与下载相关推荐

最新文章

热门文章