当前位置：首页 > VUE

vue如何实现下载

2026-02-21 12:14:25VUE

Vue实现文件下载的方法

使用<a>标签的download属性结合Blob对象实现下载。创建一个隐藏的<a>标签，设置href为文件的Blob URL，并触发点击事件。

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

<script>
export default {
  methods: {
    downloadFile() {
      const content = '文件内容';
      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';
      link.click();
      URL.revokeObjectURL(url);
    }
  }
};
</script>

通过后端API下载文件

调用后端API获取文件流，使用axios或其他HTTP库处理响应，将返回的Blob数据转换为可下载的URL。

vue如何实现下载

methods: {
  async downloadFromAPI() {
    try {
      const response = await axios.get('/api/download', {
        responseType: 'blob'
      });
      const url = URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.download = 'file.pdf';
      link.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('下载失败:', error);
    }
  }
}

使用第三方库简化下载

安装file-saver库，通过saveAs方法直接保存文件。

vue如何实现下载

npm install file-saver

import { saveAs } from 'file-saver';

methods: {
  downloadWithLibrary() {
    const content = new Blob(['文件内容'], { type: 'text/plain' });
    saveAs(content, 'example.txt');
  }
}

处理大文件分片下载

对于大文件，可采用分片下载方式，利用Range请求头实现断点续传。

async downloadLargeFile() {
  const chunkSize = 1024 * 1024; // 1MB
  let startByte = 0;
  let endByte = chunkSize;
  const fileSize = await getFileSize(); // 获取文件总大小
  const chunks = [];

  while (startByte < fileSize) {
    const response = await axios.get('/api/large-file', {
      headers: { 'Range': `bytes=${startByte}-${endByte}` },
      responseType: 'blob'
    });
    chunks.push(await response.data);
    startByte = endByte + 1;
    endByte = Math.min(startByte + chunkSize, fileSize);
  }

  const fullBlob = new Blob(chunks);
  saveAs(fullBlob, 'large-file.zip');
}

前端生成并下载Excel文件

使用xlsx库生成Excel文件并触发下载。

npm install xlsx

import * as XLSX from 'xlsx';

methods: {
  exportExcel() {
    const data = [['Name', 'Age'], ['Alice', 25], ['Bob', 30]];
    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'export.xlsx');
  }
}