当前位置：首页 > VUE

vue实现下载

2026-01-18 08:52:53VUE

Vue 实现文件下载的方法

在 Vue 中实现文件下载可以通过多种方式完成，以下是几种常见的方法：

使用 <a> 标签下载

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

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = '文件URL或Blob对象';
      link.download = '文件名.扩展名';
      link.click();
    }
  }
}
</script>

通过 Blob 对象下载二进制文件

适用于从 API 获取二进制数据（如后端返回的文件流）：

downloadFile() {
  axios.get('API地址', { responseType: 'blob' }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.download = '自定义文件名.ext';
    link.click();
    window.URL.revokeObjectURL(url); // 释放内存
  });
}

使用 FileSaver.js 库

安装 FileSaver 简化下载流程：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver';

downloadFile() {
  saveAs('文件URL或Blob对象', '保存文件名.txt');
}

下载 Base64 编码文件

处理 Base64 格式的数据：

downloadBase64() {
  const byteCharacters = atob(base64Data.split(',')[1]);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, { type: 'application/octet-stream' });
  saveAs(blob, 'filename.ext');
}