Vue 实现下载

Vue 实现文件下载的方法

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

使用 <a> 标签下载

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

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

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

使用 Blob 对象下载

对于需要从后端 API 获取文件内容的场景，可以使用 Blob 对象：

downloadFile() {
  axios.get('https://example.com/api/download', {
    responseType: 'blob'
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.pdf';
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  });
}

使用 FileSaver.js 库

FileSaver.js 是一个简化文件下载流程的库：

import { saveAs } from 'file-saver';

downloadFile() {
  axios.get('https://example.com/api/download', {
    responseType: 'blob'
  }).then(response => {
    saveAs(new Blob([response.data]), 'file.pdf');
  });
}

下载 Base64 编码文件

如果文件是 Base64 编码的字符串：

downloadBase64File(base64Data, fileName) {
  const link = document.createElement('a');
  link.href = `data:application/octet-stream;base64,${base64Data}`;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

注意事项

• 确保后端正确设置了 Content-Disposition 响应头，尤其是文件名包含中文时需要编码处理
• 跨域下载需要后端配置 CORS 头
• 大文件下载建议显示进度条，可以使用 axios 的 onDownloadProgress 回调
• 移动端部分浏览器可能对下载有限制，需要测试兼容性

以上方法覆盖了 Vue 中实现文件下载的常见场景，可根据实际需求选择合适的方式。