当前位置：首页 > VUE

vue实现本地文件下载

2026-01-22 11:32:56VUE

Vue 实现本地文件下载

方法一：使用 `<a>` 标签下载

通过动态创建 <a> 标签并设置 download 属性实现文件下载。

<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 对象下载

适用于动态生成文件内容或从 API 获取文件数据的情况。

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

<script>
export default {
  methods: {
    downloadBlob() {
      const content = 'Hello, World!'; // 文件内容
      const blob = new Blob([content], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);

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

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

方法三：通过后端 API 下载

适用于需要从后端获取文件的场景。

<template>
  <button @click="downloadFromAPI">从 API 下载</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFromAPI() {
      try {
        const response = await axios.get('/api/download', {
          responseType: 'blob'
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = 'api-file.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

方法四：使用 FileSaver.js 库

通过第三方库 file-saver 简化下载逻辑。

安装依赖：

npm install file-saver

使用示例：

<template>
  <button @click="saveFile">使用 FileSaver 下载</button>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    saveFile() {
      const content = new Blob(['FileSaver 示例内容'], { type: 'text/plain' });
      saveAs(content, 'example.txt');
    }
  }
};
</script>