Vue2+Element实现Excel文件上传下载预览【超详细图解】

目录

一、需求背景

二、落地实现 

1.文件上传

图片示例 

HTML代码 

业务代码

2.文件下载

图片示例

方式一：代码

方式二：代码

3.文件预览

图片示例

方式一：代码

方式二：代码

---

一、需求背景

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

二、落地实现 

1.文件上传

图片示例 

HTML代码 

<template><el-upload v-model="form.upload" ref="upload" name="file" action="" drag :on-remove="handleRemove" :on-success="handleSuccess" multiple :limit="1" accept=".xls,.xlsx" :before-upload="beforeUpload" :http-request="handleRequest" :on-exceed="handleExceed"><i class="el-icon-upload" style="color: #409eff"></i><div class="el-upload__tip"><span style="color: #333333;font-size: 13px">点击或将文件拖拽到这里上传</span></div><div class="el-upload__tip"><span style="color: #999999;font-size: 13px">仅支持单文件上传，文件上传行数最多1000，上传格式支持：.xls .xlsx</span></div></el-upload>
<template>

 参数解释

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

action=""：这个Element官方文档写的是一个上传的固定链接，假的，用不了。通常在开发中，也是自定义上传逻辑，所以这里置空。

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

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

multiple：支持多选文件，通常与limit搭配使用。

:limit="1"：多选文件数量，如只需要单个文件就设置1。

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

:on-remove="handleRemove"：文件列表移除文件时的方法，就是文件列表右边那个小X触发时调用的。

:on-success="handleSuccess"：文件上传成功时的方法，比如弹出一个上传成功提示。

:before-upload="beforeUpload"：上传文件之前的方法，通常用于上传文件前对文件的校验。

:http-request="handleRequest"：自定义上传方式的方法，比如远程调用。

:on-exceed="handleExceed"：文件超出个数限制时的方法，比如弹出一个仅支持单个文件的提示。

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

业务代码

export default {name: "upload-dialog",data() {return {};},methods: {handleSuccess(response, file, fileList) {// 文件上传成功的回调this.$message.success("上传成功");},handleRemove(file, fileList) {console.log("删除", file, fileList);// 看需要是否调用删除接口},beforeUpload(file) {// 在这里进行个性化校验const maxSize = 100 * 1024 * 1024; // 100MB（以字节为单位）if (file.size > maxSize) {// 这里可以添加你的提示逻辑（比如 Element UI 的 Message 警告）this.$message.warning("文件大小不能超过 100 MB");return false; // 阻止上传}return true;},handleRequest(option) {// 自定义上传函数，用于并发上传const formData = new FormData();// 这个file就是后端的接收这个文件的参数名，如果为其他，则设成其他formData.append("file", option.file);// 如果还需要其他参数比如id，name，就在这里继续加// formData.append("id", xxx);// 发送请求，这个uploadApi是import进来的，自己写uploadApi(formData).then(res => {// 自定义上传方法的话，需要手动触发文件上传成功的钩子，不然文件状态会一直处于readyoption.onSuccess(null, option.file);}).catch(error => {// 自定义上传方法的话，需要手动触发文件上传失败的钩子，不然文件状态会一直处于readyoption.onError(error, option.file, null);});},// 文件超出个数限制时的钩子handleExceed(files, fileList) {this.$message.warning("仅支持单个文件上传");},},
};

2.文件下载

图片示例

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

方式一：代码

<template><a :href="fileUrl" download>>文件</a>
</template>
export default {data() {return {fileUlr: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'};},
}

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

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

方式二：代码

<template><el-button type="text" @click="downloadFile(fileName)"><span style="color: #0000FF">文件名</span></el-button>
</template>
export default {data() {return {};},methods: {downloadFile(fileName) {// 生成随机数据（示例：5行3列）const data = [["Name", "Age", "Join Date"], // 表头...Array.from({length: 5}, (_, i) => [`User ${i + 1}`, // 姓名Math.floor(Math.random() * 30 + 20), // 随机年龄 (20-50)new Date().toISOString().split("T")[0], // 当前日期]),];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");// 生成 Excel 文件const excelBuffer = XLSX.write(workbook, {bookType: "xlsx",type: "array",});const blob = new Blob([excelBuffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});// 创建一个链接元素const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = fileName; // 设置下载的文件名// 触发下载link.click();// 释放 URL 对象URL.revokeObjectURL(link.href);this.$message.success("文件下载成功");},}
}

3.文件预览

图片示例

我的需求是：点击文件名，浏览器新打开一个标签页，展示文件内容。

这个需要在route中额外添加一个路由映射

{path: '/preview',name: 'preview',meta: { title: '文件预览', requiresAuth: false },component: () => import('@/views/preview.vue')
},

还需要额外结合@vue-office/excel写页面 

npm install @vue-office/excel vue-demi

方式一：代码

入口代码

<template><el-button type="text"><a :href="'#/preview?fileUrl='+fileUrl" target="_blank">详情</a></el-button>
</template>
export default {data() {return {fileUlr: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'};},
}

 页面代码

<template><vue-office-excel :src="excel" @rendered="rendered" @error="errorHandler"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入解析Excel文件组件
import XLSX from "xlsx";export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址，支持三种格式// string： Excel文件的网络地址，如cdn地址// ArrayBuffer：以ArrayBuffer格式读取Excel文件的内容// Blob：以Blob格式读取Excel文件的内容excel: "",};},mounted() {this.getExcel();},methods: {rendered() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},getExcel() {this.excel = this.$route.query.fileUrl;}},
};
</script>

这样直接就是浏览器新打开一个标签页展示文件内容。与文件下载十分相似。

如果需要使用二进制流、Blob对象打开的话。（详情请看方式二）

方式二：代码

入口代码

<template><el-button type="text"><a :href="'#/preview'" target="_blank">详情</a></el-button>
</template>

页面代码

<template><vue-office-excel :src="excel" @rendered="rendered" @error="errorHandler"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入解析Excel文件组件
import XLSX from "xlsx";export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址，支持三种格式// string： Excel文件的网络地址，如cdn地址// ArrayBuffer：以ArrayBuffer格式读取Excel文件的内容// Blob：以Blob格式读取Excel文件的内容excel: "",};},mounted() {this.createRandomExcel();},methods: {rendered() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},// 创建随机 Excel 文件createRandomExcel() {// 生成随机数据（示例：5行3列）const data = [["Name", "Age", "Join Date"], // 表头...Array.from({length: 5}, (_, i) => [`User ${i + 1}`, // 姓名Math.floor(Math.random() * 30 + 20), // 随机年龄 (20-50)new Date().toISOString().split("T")[0], // 当前日期]),];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");// 生成 Excel 文件const excelBuffer = XLSX.write(workbook, {bookType: "xlsx",type: "array",});const blob = new Blob([excelBuffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});this.excel = blob;},},
};
</script>

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