链接到文件下载

文件下载的基本原理

文件下载的核心在于服务器响应头中的Content-Disposition字段。当浏览器接收到带有attachment参数的响应时，会触发下载行为而非直接渲染内容。例如：

HTTP/1.1 200 OK
Content-Disposition: attachment; filename="example.pdf"
Content-Type: application/pdf

HTML中的基础下载方式

最简单的实现是使用<a>标签的download属性。这个属性会强制浏览器下载目标资源而非导航到该资源：

<a href="/files/report.pdf" download="年度报告.pdf">下载PDF文件</a>

需要注意：

• download属性仅适用于同源URL
• 跨域链接会忽略该属性
• 可以指定下载后的文件名

JavaScript动态下载

通过编程方式创建隐藏的<a>标签实现动态下载：

function downloadFile(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'downloaded-file';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Blob对象下载

前端生成内容时，可以创建Blob对象实现客户端下载：

const content = 'Hello, World!';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();

// 释放内存
setTimeout(() => URL.revokeObjectURL(url), 100);

大文件分块下载

处理大文件时可采用流式下载：

async function downloadLargeFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  const chunks = [];
  
  while(true) {
    const {done, value} = await reader.read();
    if(done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    console.log(`下载进度: ${(receivedLength/contentLength*100).toFixed(1)}%`);
  }
  
  const blob = new Blob(chunks);
  const downloadUrl = URL.createObjectURL(blob);
  // 创建a标签触发下载...
}

下载进度显示

通过XMLHttpRequest可以监控下载进度：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/large-file.zip', true);
xhr.responseType = 'blob';

xhr.onprogress = function(e) {
  if(e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    progressBar.style.width = percent + '%';
  }
};

xhr.onload = function() {
  if(this.status === 200) {
    const blob = this.response;
    // 处理下载完成的blob
  }
};

xhr.send();

多文件打包下载

使用JSZip库实现多文件打包下载：

const zip = new JSZip();
zip.file("hello.txt", "Hello World\n");
zip.file("image.png", imageBlob, {binary: true});

zip.generateAsync({type:"blob"}).then(function(content) {
  const url = URL.createObjectURL(content);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'example.zip';
  a.click();
});

服务端推送下载

结合WebSocket实现服务端推送下载：

const socket = new WebSocket('wss://example.com/download');

socket.onmessage = function(event) {
  if(typeof event.data === 'string') {
    // 处理元数据
    const meta = JSON.parse(event.data);
    console.log(`开始下载: ${meta.filename}`);
  } else {
    // 处理二进制数据
    chunks.push(event.data);
  }
};

// 服务端示例(Node.js)
ws.on('connection', (client) => {
  const stream = fs.createReadStream('large-file.bin');
  stream.on('data', (chunk) => client.send(chunk));
  stream.on('end', () => client.close());
});

下载安全考虑

实现文件下载时需注意的安全问题：

1. 验证用户权限

// 服务端中间件示例
app.get('/download/:file', authenticateUser, (req, res) => {
  if(!userHasPermission(req.user, req.params.file)) {
    return res.status(403).send('无权访问');
  }
  res.download(`/secure-files/${req.params.file}`);
});

2. 防止目录遍历攻击

// 安全路径处理
const safePath = require('path').join(
  '/secure-dir',
  req.params.file.replace(/\.\.\//g, '')
);

3. 设置下载速率限制

# Nginx配置示例
location /downloads/ {
  limit_rate 200k;  # 限制200KB/s
}

浏览器兼容性处理

针对不同浏览器的兼容方案：

function forceDownload(blob, filename) {
  if(window.navigator.msSaveOrOpenBlob) {
    // IE10+
    navigator.msSaveBlob(blob, filename);
  } else {
    // 标准浏览器
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  }
}

下载后自动打开

某些场景下需要在下载后自动打开文件：

// 仅适用于同源且浏览器允许的MIME类型
const a = document.createElement('a');
a.href = '/files/document.pdf';
a.target = '_blank';
a.download = 'document.pdf';
a.click();

断点续传实现

通过Range头实现断点续传：

// 客户端
const resumeByte = getStoredDownloadProgress(filename);
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Range', `bytes=${resumeByte}-`);
xhr.responseType = 'blob';

xhr.onprogress = (e) => {
  storeDownloadProgress(filename, resumeByte + e.loaded);
};

下载超时处理

为下载添加超时控制：

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000);

fetch('/large-file', {
  signal: controller.signal
})
.then(response => {
  clearTimeout(timeoutId);
  // 处理响应
})
.catch(err => {
  if(err.name === 'AbortError') {
    console.log('下载超时');
  }
});

移动端下载优化

针对移动设备的特殊处理：

// 检测iOS WebView
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isWebView = isIOS && !window.MSStream;

if(isWebView) {
  // iOS WebView需要特殊处理
  window.location = 'itms-services://?action=download-manifest&url=...';
} else {
  // 标准下载流程
  normalDownload();
}

下载日志记录

客户端下载日志记录方案：

function logDownload(filename, success) {
  navigator.sendBeacon('/download-log', JSON.stringify({
    file: filename,
    timestamp: Date.now(),
    status: success ? 'completed' : 'failed',
    userAgent: navigator.userAgent
  }));
}

// 使用示例
fetch('/file.pdf')
  .then(() => logDownload('file.pdf', true))
  .catch(() => logDownload('file.pdf', false));

下载按钮状态管理

优化用户交互的下载按钮状态：

<button id="downloadBtn" data-state="ready">
  <span class="ready">下载文件</span>
  <span class="downloading">下载中... <progress value="0" max="100"></span>
  <span class="completed">下载完成!</span>
</button>

<style>
  [data-state="ready"] .downloading,
  [data-state="ready"] .completed,
  [data-state="downloading"] .ready,
  [data-state="downloading"] .completed,
  [data-state="completed"] .ready,
  [data-state="completed"] .downloading {
    display: none;
  }
</style>

<script>
  btn.addEventListener('click', () => {
    btn.dataset.state = 'downloading';
    downloadFile().then(() => {
      btn.dataset.state = 'completed';
    });
  });
</script>

下载速度计算

实时计算并显示下载速度：

let lastLoaded = 0;
let lastTime = Date.now();
let speeds = [];

xhr.onprogress = function(e) {
  const now = Date.now();
  const duration = (now - lastTime) / 1000; // 秒
  const loadedDiff = e.loaded - lastLoaded;
  
  if(duration > 0) {
    const speed = loadedDiff / duration; // bytes/s
    speeds.push(speed);
    if(speeds.length > 5) speeds.shift();
    
    const avgSpeed = speeds.reduce((a,b) => a+b, 0) / speeds.length;
    speedDisplay.textContent = formatSpeed(avgSpeed);
  }
  
  lastLoaded = e.loaded;
  lastTime = now;
};

function formatSpeed(bytesPerSec) {
  const kb = bytesPerSec / 1024;
  return kb > 1024 
    ? `${(kb/1024).toFixed(1)} MB/s` 
    : `${kb.toFixed(1)} KB/s`;
}

下载队列系统

实现多个文件的顺序下载：

class DownloadQueue {
  constructor() {
    this.queue = [];
    this.isDownloading = false;
  }
  
  add(file) {
    this.queue.push(file);
    if(!this.isDownloading) this.next();
  }
  
  next() {
    if(this.queue.length === 0) {
      this.isDownloading = false;
      return;
    }
    
    this.isDownloading = true;
    const file = this.queue.shift();
    this.download(file).finally(() => this.next());
  }
  
  download(file) {
    return new Promise((resolve) => {
      console.log(`开始下载: ${file.name}`);
      // 实际下载逻辑...
    });
  }
}

// 使用示例
const queue = new DownloadQueue();
queue.add({name: 'file1.pdf', url: '/files/1.pdf'});
queue.add({name: 'file2.pdf', url: '/files/2.pdf'});