前端vue中文件下载的三种方式汇总

下面我会详细讲解“前端vue中文件下载的三种方式汇总”的完整攻略，其中也会包含两条示例说明。

前言

在开发前端应用时，文件下载是常见的需求。Vue作为一种流行的前端框架，我们在 Vue 中实现文件下载也相对比较容易。本文将介绍在 Vue 中实现文件下载的三种方式，并提供相关的示例。

方式一：通过a标签实现文件下载

通过a标签实现文件下载是最简单的方法。我们可以在 Vue 模板中设置一个a标签，并将下载链接设置为地址。例如：

<a :href="downloadUrl" download>Download</a>

其中downloadUrl是我们需要下载的文件的地址。

方式二：通过XMLHttpRequest实现文件下载

通过XMLHttpRequest实现文件下载的过程较为复杂，但是可以提供更加灵活的功能。我们需要在 Vue 中使用XMLHttpRequest对象进行文件下载。这里我们可以使用Blob对象来下载文件内容。

// 文件下载函数
function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = () => {
    const blob = new Blob([xhr.response]);
    if ("download" in document.createElement("a")) {
      const link = document.createElement("a");
      link.download = fileName;
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  };
  xhr.send();
}

然后，我们可以在Vue组件中调用这个函数。

downloadFile(downloadUrl, "file.pdf");

其中，downloadUrl是我们需要下载的文件的地址，"file.pdf"是我们想要保存的文件名。

方式三：通过iframe实现文件下载

使用iframe实现文件下载的方法比较简单，并且可以防止页面刷新或重定向。我们需要在Vue模板中创建一个iframe来实现文件下载。例如：

<iframe :src="downloadUrl" style="display: none;"></iframe>

其中，downloadUrl是我们需要下载的文件的地址。

示例1：图片下载

下面是一个从Vue 组件中下载图片的例子，我们使用了XMLHttpRequest方式进行下载。

<template>
  <div>
    <img :src="imageSrc" />
    <button @click="downloadImage()">Download</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: "https://example.com/image.png",
    };
  },
  methods: {
    downloadFile(url, fileName) {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = () => {
        const blob = new Blob([xhr.response]);
        if ("download" in document.createElement("a")) {
          const link = document.createElement("a");
          link.download = fileName;
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      };
      xhr.send();
    },
    downloadImage() {
      this.downloadFile(this.imageSrc, "image.png");
    },
  },
};
</script>

示例2：Excel文件下载

下面是一个从Vue 组件中下载Excel文件的例子，我们使用了a标签进行下载。

<template>
  <div>
    <a :href="excelUrl" download>Download Excel File</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      excelUrl: "https://example.com/file.xls",
    };
  },
};
</script>

以上就是实现前端vue中文件下载的三种方式的完整攻略，希望能对你有所帮助。