当前位置：首页 > VUE

vue前端实现下载模板

2026-03-27 05:44:09VUE

vue前端实现下载模板的方法

使用a标签下载

在Vue项目中，可以通过创建a标签并设置download属性来实现文件下载。这种方法适用于已知文件URL或本地文件的情况。

<template>
  <button @click="downloadTemplate">下载模板</button>
</template>

<script>
export default {
  methods: {
    downloadTemplate() {
      const link = document.createElement('a');
      link.href = '/path/to/template.xlsx';
      link.download = 'template.xlsx';
      link.click();
    }
  }
}
</script>

使用Blob对象下载

当需要从后端API获取文件数据时，可以使用Blob对象进行下载。这种方法适用于动态生成的文件或需要处理后端返回的二进制数据。

<script>
export default {
  methods: {
    async downloadTemplate() {
      const response = await fetch('/api/download-template');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'template.xlsx';
      link.click();
      window.URL.revokeObjectURL(url);
    }
  }
}
</script>

使用axios下载

如果项目中使用了axios，可以通过配置responseType: 'blob'来正确处理文件下载。

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadTemplate() {
      const response = await axios.get('/api/download-template', {
        responseType: 'blob'
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.download = 'template.xlsx';
      link.click();
      window.URL.revokeObjectURL(url);
    }
  }
}
</script>

使用FileSaver.js库

FileSaver.js是一个专门用于客户端文件保存的库，可以简化下载流程。

安装FileSaver.js：

npm install file-saver

使用示例：

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

export default {
  methods: {
    async downloadTemplate() {
      const response = await fetch('/api/download-template');
      const blob = await response.blob();
      saveAs(blob, 'template.xlsx');
    }
  }
}
</script>

处理大文件下载

对于大文件下载，可以显示下载进度，提升用户体验。

vue前端实现下载模板

<script>
export default {
  methods: {
    async downloadTemplate() {
      const response = await fetch('/api/download-template');
      const reader = response.body.getReader();
      const contentLength = +response.headers.get('Content-Length');
      let receivedLength = 0;
      let chunks = [];

      while(true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
        receivedLength += value.length;
        console.log(`下载进度: ${(receivedLength / contentLength * 100).toFixed(2)}%`);
      }

      const blob = new Blob(chunks);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'template.xlsx';
      link.click();
    }
  }
}
</script>