前端如何实现Excel的上传下载？

一只小可乐吖

已于 2023-05-31 16:17:30 修改

阅读量3.6k

点赞数 5

文章标签：前端上传文件下载excel blob

于 2023-05-31 16:16:16 首次发布

本文链接：https://blog.csdn.net/weixin_40381947/article/details/130970570

版权

文章介绍了前端实现Excel文件上传和下载的两种常见方法：一是借助服务器，通过Ajax或fetch进行文件交互；二是利用HTML5的FileReader和Blob对象实现本地文件读取和下载。这两种方式都需要与后端接口配合，处理文件的上传和下载请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端实现 Excel 的上传下载一般可以使用两种方式：

一种是借助服务器实现文件的上传和下载

一种是利用 HTML5 提供的 FileReader 和 Blob 对象实现本地文件的读取和下载。

1. 借助服务器实现文件的上传和下载

在此方案中，需要实现客户端将 Excel 文件上传至服务端，然后再由服务端返回 Excel 文件给客户端进行下载。常见的实现方式有：

form 表单提交
Ajax 实现提交
使用 fetch 实现上传与下载

下面是一个简单的基于 fetch 的上传和下载实现方法，这里假设后端接口已经能够正确解析接收到的文件并返回相应的结果：

// 上传文件
const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    const data = await response.json();

    if (data.success) {
      console.log('上传成功');
    } else {
      console.error('上传失败');
    }
  } catch (error) {
    console.error('上传出错');
  }
};

// 下载文件
const downloadFile = async () => {
  try {
    const response = await fetch('/api/download', {
      method: 'GET',
    });

    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'example.xlsx'; // 下载文件名
    link.click();

    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载出错');
  }
};

2. 利用 HTML5 的File API，它提供的 FileReader 和 Blob 对象实现本地文件的读取和下载

我们可以利用 HTML5 提供的 FileReader 实现将 Excel 文件读入内存，再使用 Blob 和 URL.createObjectURL 实现文件内容的下载。具体实现如下：

excel文件上传

<input type="file" id="input-file" accept=".xlsx, .xls">
<button onclick="handleUpload()">Upload</button>

<script>
function handleUpload() {
  const fileInput = document.getElementById('input-file');
  const file = fileInput.files[0];
  
  if (!file) {
    alert('Please select a file!');
    return;
  }
  //new formdata()函数是FormData的构造函数，用来生成一个新的FormData对象
  const formData = new FormData();
  formData.append('file', file);
  
  // 发送文件到后端进行处理
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    alert('Upload success!');
  }).catch(error => {
    console.error(error);
    alert('Upload failed.');
  });
}
</script>

我们获取文件对象，将其添加到FormData对象中，并通过fetch()方法发送POST请求。这样就可以实现文件的上传。

注意：在上述代码中的 /upload 接口应该由后端进行实现。

Excel文件下载

1.通过fetch调用请求url，并得到response。

2.使用response.blob()方法将response转化为Blob数据类型。

3.将Blob数据类型转化为URL对象，用于创建下载链接。

4.创建<a>元素，设置href属性为URL对象的URL，设置download属性为指定的文件名。

5.添加<a>元素到页面中，模拟用户点击下载链接，下载文件。

6.删除<a>元素。

<button onclick="handleDownload()">Download</button>

<script>
function handleDownload() {
  // 发送请求获取 Excel 文件流
  fetch('/download').then(response => {
    return response.blob();
  }).then(blob => {
    // 创建并下载 Excel 文件
    const url = window.URL.createObjectURL(new Blob([blob]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'example.xlsx';
    document.appendChild(link);
    link.click();
    document.removeChild(link);
  }).catch(error => {
    console.error(error);
    alert('Download failed.');
  });
}
</script>