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 => {
        // 自定义上传方法的话，需要手动触发文件上传成功的钩子，不然文件状态会一直处于ready
        option.onSuccess(null, option.file);
      }).catch(error => {
        // 自定义上传方法的话，需要手动触发文件上传失败的钩子，不然文件状态会一直处于ready
        option.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文件，修改对应的格式即可。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/978535.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

在线会议时, 笔记本电脑的麦克风收音效果差是为什么

在线会议时, 笔记本电脑的麦克风收音效果差是为什么

背景 最近在线面试. 使用腾讯会议或者飞书, 戴耳机参加在线面试, 遇到好几个面试官说我的音质不好. 一直没在意, 后来反思, 应该是电脑哪里出了问题. 排查 先买了一副品牌有线耳机, 测试后本地录制的声音仍然品质很差去掉耳机延长线后, 麦克风品质仍然很差最终找到答案, 原…
阅读更多...
【十二】Golang 映射

【十二】Golang 映射

&#x1f4a2;欢迎来到张胤尘的开源技术站 &#x1f4a5;开源如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 映射映射的定义映射初始化make 函数使用字面量 源…
阅读更多...
【HarmonyOS Next】鸿蒙TaskPool和Worker详解 （一）

【HarmonyOS Next】鸿蒙TaskPool和Worker详解 （一）

【HarmonyOS Next】鸿蒙TaskPool和Worker详解 &#xff08;一&#xff09; 一、TaskPool和Worker如何实现多线程&#xff1f;各自特点是什么&#xff1f; 在鸿蒙中通过TaskPool和Worker实现多线程并发&#xff0c;两者都基于Actor并发模型实现。 Actor并发模型&#xff0c;每…
阅读更多...
FFmpeg.NET：.NET 平台上的音视频处理利器

FFmpeg.NET：.NET 平台上的音视频处理利器

FFmpeg.NET 是一个封装了 FFmpeg 功能的 .NET 库&#xff0c;能够方便地在 C# 项目中处理音视频文件。它支持多种操作&#xff0c;包括转码、剪辑、合并、分离音频等。 功能 解析元数据从视频生成缩略图使用以下参数将音频和视频转码为其他格式&#xff1a; 码率&#xff08;…
阅读更多...
计算机网络————（一）HTTP讲解

计算机网络————（一）HTTP讲解

基础内容分类 从TCP/IP协议栈为依托&#xff0c;由上至下、从应用层到基础设施介绍协议。 1.应用层&#xff1a; HTTP/1.1 Websocket HTTP/2.0 2.应用层的安全基础设施 LTS/SSL 3.传输层 TCP 4.网络层及数据链路层 IP层和以太网 HTTP协议 网络页面形成基本 流程&#xff1a…
阅读更多...
源码压缩包泄露

源码压缩包泄露

##解题思路 因为网站的文件都放在www下面&#xff0c;所以直接访问/www.zip就可以得到网页的源码压缩包 在fl000g.txt这个文件中看到一个flag{flag_here}不像是真的flag&#xff0c;尝试提交ctfshow{flag_here}&#xff0c;果然提交失败 打开文件属性之类的&#xff0c;也没有…
阅读更多...
组态软件在物联网中的应用

组态软件在物联网中的应用

随着物联网的快速发展&#xff0c;组态软件在物联网中的应用也越来越广泛。组态软件是一种用于创建和管理物联网系统的可视化工具&#xff0c;它能够将传感器、设备和网络连接起来&#xff0c;实现数据的采集、分析和可视化。本文将探讨组态软件在物联网中的应用&#xff0c;并…
阅读更多...
Java+SpringBoot+Vue+数据可视化的音乐推荐与可视化平台（程序+论文+讲解+安装+调试+售后）

Java+SpringBoot+Vue+数据可视化的音乐推荐与可视化平台（程序+论文+讲解+安装+调试+售后）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 在互联网技术以日新月异之势迅猛发展的浪潮下&#xff0c;5G 通信技术的普及、云计算能力…
阅读更多...
（论文）PartialSpoof 数据库和检测话语中嵌入的短假语音片段的对策

（论文）PartialSpoof 数据库和检测话语中嵌入的短假语音片段的对策

The PartialSpoof Database and Countermeasures for the Detection of Short Fake Speech Segments Embedded in an Utterance 摘要 自动说话人验证容易受到各种作和欺骗&#xff0c;例如文本到语音合成、语音转换、重放、篡改、对抗性攻击等。我们考虑一种称为“部分欺骗”…
阅读更多...
Leaflet介绍及使用示例

Leaflet介绍及使用示例

一、Leaflet介绍 Leaflet是一个开源的JavaScript库&#xff0c;专门用于构建交互式的地图应用程序。它以其轻量级、高性能和易于使用的API而著称&#xff0c;方便开发者在网页中集成地图功能。Leaflet支持多种地图提供商的瓦片图层&#xff0c;如OpenStreetMap、Mapbox等&…
阅读更多...
【笔记】redis回忆录（未完 重头过一遍）

【笔记】redis回忆录（未完 重头过一遍）

了解 redis在linux上运行 没有window版本 有也是微软自己搞的 &#xff08;一&#xff09;安装与修改配置 1.在linux虚拟机上 安装gcc依赖 然后再usr/local/src解压在官网下载好的redis安装包 直接拖进去 tar -zxvf 安装包名字 tab键补齐 解压成功 进入软件 并执行编译命令…
阅读更多...
使用 Apache Dubbo 释放 DeepSeek R1 的全部潜力

使用 Apache Dubbo 释放 DeepSeek R1 的全部潜力

作者&#xff1a;陈子康&#xff0c;Apache Dubbo Contributor 2025年1月20日&#xff0c;国产大模型公司深度求索&#xff08;DeepSeek&#xff09;正式发布了大语言模型 DeepSeek-R1&#xff0c;并同步开源其模型权重。通过大规模强化学习技术&#xff0c;DeepSeek-R1 显著提…
阅读更多...
Unity TMPro显示中文字体

Unity TMPro显示中文字体

TMP默认的字体只能显示英语&#xff0c;那么怎么显示中文呢 1、找到支持中文的字体文件 在c盘搜索Fonts文件夹有很多支持中文的字体文件 我这里选择雅黑 PS.双击打开发现里面有粗体细体普通三个版本&#xff0c;也可以只导入一个版本进去 2、将其拖入到unity Assets里面 3…
阅读更多...
【MySQL篇】数据库基础

【MySQL篇】数据库基础

目录 1&#xff0c;什么是数据库&#xff1f; 2&#xff0c;主流数据库 3&#xff0c;MySQL介绍 1&#xff0c;MySQL架构 2&#xff0c;SQL分类 3&#xff0c;MySQL存储引擎 1&#xff0c;什么是数据库&#xff1f; 数据库&#xff08;Database&#xff0c;简称DB&#xf…
阅读更多...
Linux 日志系统·

Linux 日志系统·

目录 一、前言 二、实现一个简单的日志 1.可变参数 2.日志等级 3.日志时间 4.打印每一条参数 5.合并两个缓冲区 6.封装日志函数 三、完整代码 一、前言 当我们写一个函数&#xff0c;例如打开文件open&#xff0c;当我们打开失败的时候&#xff0c;会调用perror看到错误…
阅读更多...
【PromptCoder】使用 package.json 生成 cursorrules

【PromptCoder】使用 package.json 生成 cursorrules

【PromptCoder】使用 package.json 生成 cursorrules 在当今快节奏的开发世界中&#xff0c;效率和准确性至关重要。开发者们不断寻找能够优化工作流程、帮助他们更快编写高质量代码的工具。Cursor 作为一款 AI 驱动的代码编辑器&#xff0c;正在彻底改变我们的编程方式。但如…
阅读更多...
【VUE】vue-i18n: Uncaught SyntaxError: Not available in legacy mode

【VUE】vue-i18n: Uncaught SyntaxError: Not available in legacy mode

报错&#xff1a; 解决方法&#xff1a; 找到 createI18n 并加上 legacy: false,
阅读更多...
2025年SCI一区智能优化算法：混沌进化优化算法（Chaotic Evolution Optimization, CEO），提供MATLAB代码

2025年SCI一区智能优化算法：混沌进化优化算法（Chaotic Evolution Optimization, CEO），提供MATLAB代码

一、混沌进化优化算法 https://github.com/ITyuanshou/MATLABCode 1. 算法简介 混沌进化优化算法&#xff08;Chaotic Evolution Optimization, CEO&#xff09;是2025年提出的一种受混沌动力学启发的新型元启发式算法。该算法的主要灵感来源于二维离散忆阻映射的混沌进化过…
阅读更多...
网络安全之日志审计 网络安全审计制度

网络安全之日志审计 网络安全审计制度

一、代码审计安全 代码编写安全: 程序的两大根本:变量与函数 漏洞形成的条件:可以控制的变量“一切输入都是有害的 ” 变量到达有利用价值的函数&#xff08;危险函数&#xff09;“一切进入函数的变量是有害的” 漏洞的利用效果取决于最终函数的功能&#xff0c;变量进入…
阅读更多...
VScode+stfp插件，实现文件远程同步保存【2025实操有效】

VScode+stfp插件，实现文件远程同步保存【2025实操有效】

目录 1 痛点2 准备工作3 操作步骤3.1 第一步&#xff0c;下载STFP插件3.2 第二步&#xff0c;修改配置文件3.3 第三步&#xff0c;测试是否成功 4 后记 1 痛点 我一直用vscode远程连接服务器&#xff0c;传代码文件等到服务器上面&#xff0c;突然有一次服务器那边尽心维修&am…
阅读更多...
最新文章

Copyright @ 2022~2023