在Vue中实现文件下载三种方法_Axios_创建一个隐藏的<a>标签

在Vue中实现文件下载的三种方法

在Vue项目中，我们需要实现文件下载功能时，可以采取以下三种方法：利用浏览器内置功能、通过Axios或Fetch API发送请求、以及使用第三方插件或库。下面我们来具体看看每种方法的步骤和示例。

一、使用浏览器内置功能

使用浏览器内置功能是最直接的方法，主要依赖HTML标签和属性来完成。

1. 创建一个隐藏的<a>标签。
2. 设置该标签的href属性为要下载文件的URL。
3. 设置该标签的download属性为文件名。
4. 通过JavaScript触发该标签的点击事件。

示例代码：

<script>

  function downloadFile(url, fileName) {

    const link = document.createElement('a');

    link.href = url;

    link.download = fileName;

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);

  }

</script>

二、通过Axios或Fetch API发送请求并下载文件

如果文件是从服务器API获取的，我们可以使用Axios或Fetch API来实现文件下载。

1. 使用Axios或Fetch API发送GET请求获取文件数据。
2. 创建一个Blob对象来存储文件数据。
3. 创建一个隐藏的<a>标签，设置其href属性为Blob对象的URL。
4. 设置标签的download属性为文件名。
5. 触发标签的点击事件。

示例代码（使用Axios）：

<script>

  function downloadFileWithAxios(url, fileName) {

    axios.get(url, { responseType: 'blob' }).then(response => {

      const link = document.createElement('a');

      link.href = URL.createObjectURL(response.data);

      link.download = fileName;

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

    });

  }

</script>

三、使用第三方插件或库

使用第三方库可以大大简化文件下载的实现过程。

1. 安装库，例如Blob.js。
2. 使用库提供的方法实现文件下载。

示例代码（使用Blob.js）：

<script>

  // 引入Blob.js库

  const Blob = require('blob');



  function downloadFileWithBlob(url, fileName) {

    fetch(url).then(response => response.blob()).then(blob => {

      const link = document.createElement('a');

      link.href = window.URL.createObjectURL(blob);

      link.download = fileName;

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

      window.URL.revokeObjectURL(link.href);

    });

  }

</script>

根据不同的需求选择合适的方法，以下是三种方法的适用场景：

根据实际需求选择合适的方法，可以更高效地实现文件下载功能。