当前位置：首页 > VUE

vue文件下载实现

2026-03-28 22:09:43VUE

Vue 文件下载实现方法

使用 `<a>` 标签下载

通过创建隐藏的 <a> 标签实现文件下载，适用于静态文件或已知 URL 的情况。

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = '/path/to/file.pdf';
      link.download = 'filename.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

通过 Blob 对象下载

适用于后端返回文件流或二进制数据的场景。

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

<script>
export default {
  methods: {
    async downloadFile() {
      const response = await fetch('https://api.example.com/download');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = 'filename.pdf';
      document.body.appendChild(link);
      link.click();

      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }
  }
}
</script>

使用 axios 下载文件

结合 axios 处理文件下载请求，适用于需要添加认证头等复杂场景。

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

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      const response = await axios({
        url: 'https://api.example.com/download',
        method: 'GET',
        responseType: 'blob',
        headers: { Authorization: 'Bearer token' }
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.download = 'filename.pdf';
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }
  }
}
</script>

处理大文件下载

对于大文件下载，可以显示下载进度。

<template>
  <button @click="downloadLargeFile">下载大文件</button>
  <div v-if="progress > 0">下载进度: {{ progress }}%</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async downloadLargeFile() {
      const response = await axios({
        url: 'https://api.example.com/large-file',
        method: 'GET',
        responseType: 'blob',
        onDownloadProgress: (progressEvent) => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.download = 'large-file.zip';
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
      this.progress = 0;
    }
  }
}
</script>

服务端渲染(SSR)兼容方案

在 Nuxt.js 等 SSR 框架中，需要判断运行环境。

vue文件下载实现

if (process.client) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}