HTML代码

在一个愉快的年后需求经理提出需要完成对单个Excel文件的上传、下载、预览的功能对于一个没写过下载和预览的后端来说真的十分痛苦经过不断百度努力看别人的博客最终实现如下图所示

二、落地实现

13px仅支持单文件上传文件上传行数最多1000上传格式支持.xls

template

namefile是传到后端时它接收这个文件的参数名叫file本人没有仔细研究因为在调接口时可个性化定制参数名后续贴的代码会提到。

action这个Element官方文档写的是一个上传的固定链接假的用不了。

通常在开发中也是自定义上传逻辑所以这里置空。

drag启用拖拽上传Element默认是false直接写drag不写:dragtrue就是true了。

show-file-list显示已上传文件列表就是上传框下面的那行文件名Element默认是false

accept.xls,.xlsx接受上传的文件类型我的需求是只要Excel的。

:on-removehandleRemove文件列表移除文件时的方法就是文件列表右边那个小X触发时调用的。

:on-successhandleSuccess文件上传成功时的方法比如弹出一个上传成功提示。

:before-uploadbeforeUpload上传文件之前的方法通常用于上传文件前对文件的校验。

:http-requesthandleRequest自定义上传方式的方法比如远程调用。

:on-exceedhandleExceed文件超出个数限制时的方法比如弹出一个仅支持单个文件的提示。

classel-upload__tip这个是Element封装好的样式我的需求是需要文字在上传框里显示所以都用el-upload__tip官方文档还有个框外的用el-upload__text。

业务代码

文件上传成功的回调this.$message.success(上传成功);},handleRemove(file,

fileList)

看需要是否调用删除接口},beforeUpload(file)

{//

警告this.$message.warning(文件大小不能超过

100

这个file就是后端的接收这个文件的参数名如果为其他则设成其他formData.append(file,

option.file);//

发送请求这个uploadApi是import进来的自己写uploadApi(formData).***n(res

{//

自定义上传方法的话需要手动触发文件上传成功的钩子不然文件状态会一直处于readyoption.onSuccess(null,

{//

自定义上传方法的话需要手动触发文件上传失败的钩子不然文件状态会一直处于readyoption.onError(error,

option.file,

文件超出个数限制时的钩子handleExceed(files,

fileList)

{this.$message.warning(仅支持单个文件上传);},},

2.文件下载

我是通过a/a标签去实现文件下载的如果想通过点击按钮实现那么在按钮里面套塞a/a即可

方式一代码

http://static.shanhuxueyuan.com/demo/excel.xlsx};},

这个href放是一个像http://static.shanhuxueyuan.com/demo/excel.xlsx这样的cdn文件地址点击就可以直接下载到本地。

如果需要通过二进制流、Blob对象实现的话则自定义按钮触发方法去调用。

详情请看方式二

方式二代码

clickdownloadFile(fileName)span

stylecolor:

Date().toISOString().split(T)[0],

当前日期]),];//

XLSX.utils.aoa_to_sheet(data);//

创建工作簿const

XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook,

worksheet,

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,});//

创建一个链接元素const

document.createElement(a);link.href

URL.createObjectURL(blob);link.download

fileName;

对象URL.revokeObjectURL(link.href);this.$message.success(文件下载成功);},}

3.文件预览

http://static.shanhuxueyuan.com/demo/excel.xlsx};},

页面代码

vue-office/excel/lib/index.css;

//引入解析Excel文件组件

ArrayBuffer以ArrayBuffer格式读取Excel文件的内容//

,};},mounted()

{console.log(渲染完成);},errorHandler()

{console.log(渲染失败);},getExcel()

{this.excel

这样直接就是浏览器新打开一个标签页展示文件内容。

与文件下载十分相似。

方式二代码

vue-office/excel/lib/index.css;

//引入解析Excel文件组件

ArrayBuffer以ArrayBuffer格式读取Excel文件的内容//

,};},mounted()

{this.createRandomExcel();},methods:

{rendered()

{console.log(渲染完成);},errorHandler()

创建随机

Date().toISOString().split(T)[0],

当前日期]),];//

XLSX.utils.aoa_to_sheet(data);//

创建工作簿const

XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook,

worksheet,

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,});this.excel

blob;},},

/script上述代码也适用于展示Word和PPT文件修改对应的格式即可。