elementui下载文件到本地

Element UI 是 Vue.js 的一个 UI 框架，提供了基础的 UI 组件和丰富的功能组件，使得前端开发更加高效。在 Element UI 中，使用 el-upload 组件可以实现文件的上传和下载。

要实现文件下载的功能，我们需要给 el-upload 组件添加一个 action 属性，指定上传文件的服务器地址。在服务器端，我们需要生成一个文件并返回该文件的下载地址。当用户点击下载按钮时，前端向该下载地址发送请求，通过浏览器的下载功能将文件下载到本地。

以下是具体实现步骤：

1. 在页面中引入 el-upload 组件和 axios 库（用于发送HTTP请求）。

<template>
  <el-upload
    action="/downloadFile"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">上传</el-button>
  </el-upload>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    // 上传前处理逻辑，例如文件大小、文件格式校验等
    beforeUpload(file) {
      // do something
    },
    // 文件上传成功处理逻辑
    handleSuccess(response, file, fileList) {
      // do something
    },
    // 文件下载
    download() {
      axios.get('/download').then((res) => {
        // 处理文件流
        let blob = new Blob([res.data]);
        let fileName = 'example.xlsx';
        // 下载文件
        let link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
      });
    }
  }
}
</script>

2. 在后端实现文件下载的逻辑，例如使用 Node.js 中的 express 框架。

app.get('/download', (req, res) => {
  // 生成文件并返回该文件的地址
  const filePath = '/path/to/example.xlsx';
  res.download(filePath);
});

这样，用户点击下载按钮时，就会发送一个 GET 请求到 /download 地址，后端会生成一个名为 example.xlsx 的文件并返回该文件的地址。前端通过浏览器下载功能将该文件下载到本地。