当前位置：首页 > VUE

vue文件下载后端实现

2026-01-12 04:43:59VUE

Vue 文件下载后端实现

在 Vue 项目中实现文件下载功能通常需要前后端配合。后端主要负责生成文件并提供下载接口，前端通过调用接口触发下载。以下是常见的后端实现方法（以 Node.js/Express 为例）：

基础实现（Express）

const express = require('express');
const fs = require('fs');
const path = require('path');

app.get('/download', (req, res) => {
  const filePath = path.join(__dirname, 'files/sample.pdf');

  // 设置响应头
  res.setHeader('Content-Type', 'application/octet-stream');
  res.setHeader('Content-Disposition', 'attachment; filename=sample.pdf');

  // 创建文件流并传输
  const fileStream = fs.createReadStream(filePath);
  fileStream.pipe(res);
});

动态生成文件

若需动态生成文件（如 CSV/Excel）：

app.get('/export-csv', (req, res) => {
  const data = "Name,Age\nAlice,25\nBob,30";

  res.setHeader('Content-Type', 'text/csv');
  res.setHeader('Content-Disposition', 'attachment; filename=data.csv');
  res.send(data);
});

大文件分块传输

处理大文件时建议使用流式传输：

app.get('/download-large', (req, res) => {
  const filePath = path.join(__dirname, 'large_file.zip');
  const stat = fs.statSync(filePath);

  res.setHeader('Content-Length', stat.size);
  res.setHeader('Content-Type', 'application/zip');
  res.setHeader('Content-Disposition', 'attachment; filename=large_file.zip');

  const stream = fs.createReadStream(filePath);
  stream.on('error', (err) => res.status(500).end());
  stream.pipe(res);
});

权限控制

添加权限验证中间件：

function checkAuth(req, res, next) {
  if (!req.headers.authorization) {
    return res.status(403).send('Forbidden');
  }
  next();
}

app.get('/secure-download', checkAuth, (req, res) => {
  // 文件传输逻辑
});

前端调用示例

前端通过 window.location 或 axios 调用：

// 方法1：直接跳转
window.location.href = '/download';

// 方法2：axios（需处理Blob）
axios.get('/download', { responseType: 'blob' })
  .then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.ext');
    document.body.appendChild(link);
    link.click();
    link.remove();
  });