文件导出，文件下载，搞懂这几个就够了！（Blob对象、a链接、form表单）

关于文件下载功能几种实现方式汇总。

前言

我正在参加 「 更文挑战玩法升级，快乐成长不迷茫｜掘金·日新计划」，关于文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？今天就来盘点一下前端实现文件下载的几种方式。

使用element UI 和 Vue实现文件下载功能，你可以按照以下方式进行操作：

第一种：定义按钮，添加点击事件

1、在Vue组件中，定义一个按钮或链接，并添加一个点击事件处理函数来触发文件下载。如下：

<template> 
    <button @click="downloadFile">下载文件</button> 
</template>

2、实现downloadFile方法用于处理文件下载逻辑。你可以使用JavaScript的fetch函数发送GET请求来下载文件。具体实现如下（代码相关解析在请看注释）：

methods: {
  async downloadFile() {
    try {

      // 发送GET请求下载文件
      const response = await fetch('http://example.com/file.pdf');
      const blob = await response.blob();

      // 创建一个临时的URL对象
      const url = window.URL.createObjectURL(blob);

      // 创建一个<a>元素，并设置其href为临时URL，以便下载文件
      const link = document.createElement('a');
      link.href = url;
      link.download = 'file.pdf';

      // 模拟点击下载链接
      link.click();

      // 清理临时URL对象
      window.URL.revokeObjectURL(url);
      
    } catch (error) {
      console.error('下载文件出错：', error);
    }
  }
}

3、 运行你的Vue应用，当点击"下载文件"按钮时，它将触发downloadFile方法来下载文件，

第二种：文档流形式实现文件下载

1、同样定义一个按钮，添加一个点击事件download，如第一种方式的步骤一一样，这里不再做赘述。

2、实现download方法处理逻辑，使用axios请求，请求后端下载接口。具体实现如下（代码相关解析在请看注释）：

async download() {
      axios.post(`${process.env.VUE_APP_GATEWAY_API}/example/download`, '', { responseType: 'blob' }).then(res => {
        const blob = new Blob([res.data]); // 处理文档流
        // 设置文件名
        const fileName = '111.xlsx';
        const elink = document.createElement('a');
        elink.download = fileName;
        // 隐藏动态创建的元素
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        // 将a链接元素添加到页面中
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        // 移除动态创建的a链接元素
        document.body.removeChild(elink);
      })
    },

第三种：除创建a链接外，还可以使用form表单实现文件下载

通过form表单来实现文件下载，可以通过创建和添加其他表单元素（例如隐藏的input元素），以便传递数据或参数。以下是一个具体示例：

1、在vue组件中创建和操作表单元素

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

2、实现downloadFile方法处理逻辑，创建一个form元素，将form元素添加到页面中,提交表单进行文件下载。具体实现如下（代码相关解析在请看注释）：

<script>
export default {
  methods: {
    downloadFile() {
      // 创建一个form元素
      const form = document.createElement('form');
      form.method = 'GET';
      form.action = 'http://example.com/file.pdf';

      // 创建一个隐藏的input元素用于传递参数（可选）
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'param1';
      input.value = 'value1';
      form.appendChild(input);

      // 将form元素添加到页面中
      document.body.appendChild(form);

      // 提交表单进行文件下载
      form.submit();

      // 移除动态创建的form元素
      document.body.removeChild(form);
    }
  }
}
</script>

在这个示例中，点击"下载文件"按钮时，会通过JavaScript动态创建一个form表单，并设置其属性（例如method和action）。还可以根据需要创建和添加其他表单元素（例如隐藏的input元素），以便传递数据或参数。

然后，将动态创建的form元素添加到页面中，并执行form.submit()来提交表单进行文件下载。完成下载后，记得将动态创建的form元素从页面中移除，以确保不会留下无用的元素。

这样，就可以在Vue的JavaScript代码中动态创建和控制form表单来实现文件下载功能。

第四种：亦或者这样，快速通过form表单的action属性实现文件导出

1、在Vue组件中定义一个form表单元素，并设置其属性action为文件的下载链接。

<template>
  <form ref="downloadForm" action="http://example.com/file.pdf" method="GET">
    <button type="submit">下载文件</button>
  </form>
</template>

2、在点击下载按钮时，通过JavaScript代码提交表单来触发文件下载。

methods: {
  downloadFile() {
    this.$refs.downloadForm.submit();
  }
}

3、运行你的Vue应用，当点击"下载文件"按钮时，它将通过提交表单的方式下载文件。

注意

请注意，上述代码中的http://example.com/file.pdf是一个示例文件的URL。需要替换为实际要下载的文件的URL。以上就是几种实现文件导出，模版文件下载的实现方式的汇总。

写在最后

以上便是本次分享的全部内容，希望对你有所帮助^_^

到这里业务需求基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路 谢谢支持