链接到文件下载

链接到文件下载的基本方法

在HTML中创建文件下载链接最直接的方式是使用<a>标签的href属性指向文件路径，并添加download属性。当用户点击这个链接时，浏览器会提示下载而不是直接打开文件。

<a href="/path/to/file.pdf" download>下载PDF文件</a>

download属性可以接受一个可选参数作为下载时的默认文件名：

<a href="/report-2023.xlsx" download="年度报告.xlsx">下载Excel报表</a>

处理不同文件类型

常见文档格式

对于PDF、Word、Excel等文档，直接链接即可：

<!-- PDF文件 -->
<a href="/documents/manual.pdf" download="用户手册.pdf">下载手册</a>

<!-- Word文档 -->
<a href="/reports/weekly.docx" download>周报下载</a>

<!-- Excel表格 -->
<a href="/data/export.xlsx" download="数据导出.xlsx">导出数据</a>

压缩文件处理

ZIP和RAR等压缩包需要特别注意MIME类型：

<a href="/backups/project.zip" download="项目备份.zip">
  下载完整项目包
</a>

多媒体文件

即使浏览器可以播放的音视频文件，也可以通过下载链接提供：

<a href="/music/song.mp3" download="主题曲.mp3">下载MP3</a>
<a href="/videos/demo.mp4" download="演示视频.mp4">下载视频</a>

动态生成下载链接

通过JavaScript可以动态创建下载链接：

function createDownloadLink(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || url.split('/').pop();
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// 使用示例
createDownloadLink('/data/export.csv', '销售数据.csv');

处理大文件下载

对于大文件下载，可能需要显示进度条：

async function downloadLargeFile(url, filename) {
  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);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(downloadUrl);
}

安全考虑

同源策略限制

浏览器对跨域下载有严格限制，解决方案包括：

1. 服务器设置CORS头：

Access-Control-Allow-Origin: *

2. 通过代理服务器下载：

fetch('/download-proxy?url=' + encodeURIComponent(externalUrl))
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.ext';
    a.click();
  });

防止恶意文件

前端可以做基本验证：

function isSafeExtension(filename) {
  const unsafe = ['.exe', '.bat', '.sh', '.js'];
  return !unsafe.some(ext => filename.endsWith(ext));
}

用户体验优化

添加下载图标

使用Font Awesome等图标库增强视觉效果：

<a href="/files/document.pdf" download class="download-link">
  <i class="fas fa-file-pdf"></i> 下载PDF文档
</a>

<style>
.download-link {
  padding: 8px 16px;
  background: #4285f4;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}
.download-link:hover {
  background: #3367d6;
}
</style>

显示文件信息

在下载链接旁显示文件大小和类型：

<div class="file-download">
  <a href="/files/report.pdf" download>年度财务报告</a>
  <span class="file-info">PDF • 2.4MB</span>
</div>

<style>
.file-download {
  display: inline-block;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}
.file-info {
  display: block;
  font-size: 0.8em;
  color: #666;
}
</style>

浏览器兼容性问题

旧版浏览器支持

对于不支持download属性的IE浏览器，可以使用JavaScript替代方案：

document.querySelectorAll('a[download]').forEach(link => {
  if (!('download' in document.createElement('a'))) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = this.href;
      document.body.appendChild(iframe);
      setTimeout(() => document.body.removeChild(iframe), 100);
    });
  }
});

移动端特殊处理

在iOS等移动设备上可能需要特殊处理：

function isIOS() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent);
}

if (isIOS()) {
  document.querySelector('a[download]').forEach(link => {
    link.target = '_blank';
  });
}

服务器端配置

强制下载的HTTP头

服务器可以设置Content-Disposition头强制下载：

Content-Disposition: attachment; filename="example.pdf"

Nginx配置示例：

location /downloads/ {
  add_header Content-Disposition 'attachment';
}

文件类型验证

服务器端应该验证文件类型：

$allowed = ['pdf', 'docx', 'xlsx'];
$ext = pathinfo($_GET['file'], PATHINFO_EXTENSION);

if (!in_array($ext, $allowed)) {
  header('HTTP/1.0 403 Forbidden');
  exit;
}

高级应用场景

打包多个文件下载

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

async function downloadMultipleFiles(fileUrls) {
  const zip = new JSZip();
  
  await Promise.all(fileUrls.map(async url => {
    const response = await fetch(url);
    const blob = await response.blob();
    const filename = url.split('/').pop();
    zip.file(filename, blob);
  }));
  
  const content = await zip.generateAsync({type: 'blob'});
  const downloadUrl = URL.createObjectURL(content);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'archive.zip';
  a.click();
}

断点续传实现

对大文件实现断点续传功能：

class ResumableDownload {
  constructor(url, filename) {
    this.url = url;
    this.filename = filename;
    this.downloaded = 0;
    this.chunkSize = 1024 * 1024; // 1MB chunks
  }

  async start() {
    const response = await fetch(this.url, {
      headers: {'Range': `bytes=${this.downloaded}-`}
    });
    
    if (response.status === 206) {
      const reader = response.body.getReader();
      const chunks = [];
      
      while(true) {
        const {done, value} = await reader.read();
        if (done) break;
        
        chunks.push(value);
        this.downloaded += value.length;
        this.saveProgress();
      }
      
      this.completeDownload(chunks);
    }
  }

  saveProgress() {
    localStorage.setItem(this.url, this.downloaded);
  }

  completeDownload(chunks) {
    const blob = new Blob(chunks);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = this.filename;
    a.click();
    localStorage.removeItem(this.url);
  }
}

性能优化技巧

预加载下载资源

使用<link rel="preload">提高下载速度：

<link rel="preload" href="/large-file.zip" as="fetch" crossorigin>

分块下载显示进度

结合Fetch API和ReadableStream实现进度显示：

async function downloadWithProgress(url, filename) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  const chunks = [];
  
  const progressBar = document.createElement('div');
  progressBar.style.width = '300px';
  progressBar.style.height = '20px';
  progressBar.style.border = '1px solid #ccc';
  document.body.appendChild(progressBar);
  
  const progressFill = document.createElement('div');
  progressFill.style.height = '100%';
  progressFill.style.width = '0%';
  progressFill.style.backgroundColor = '#4CAF50';
  progressBar.appendChild(progressFill);
  
  while(true) {
    const {done, value} = await reader.read();
    if (done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    progressFill.style.width = `${(receivedLength/contentLength)*100}%`;
  }
  
  document.body.removeChild(progressBar);
  const blob = new Blob(chunks);
  const downloadUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = filename;
  a.click();
}

实际应用案例

电商网站订单导出

典型的电商后台订单导出功能实现：

<div class="export-panel">
  <h3>订单导出</h3>
  <div class="date-range">
    <input type="date" id="startDate">
    <span>至</span>
    <input type="date" id="endDate">
  </div>
  <div class="format-options">
    <label><input type="radio" name="format" value="csv" checked> CSV</label>
    <label><input type="radio" name="format" value="xlsx"> Excel</label>
    <label><input type="radio" name="format" value="json"> JSON</label>
  </div>
  <button id="exportBtn">导出订单</button>
</div>

<script>
document.getElementById('exportBtn').addEventListener('click', async () => {
  const start = document.getElementById('startDate').value;
  const end = document.getElementById('endDate').value;
  const format = document.querySelector('input[name="format"]:checked').value;
  
  const response = await fetch(`/api/orders/export?start=${start}&end=${end}&format=${format}`);
  const blob = await response.blob();
  const filename = `订单_${start}_${end}.${format}`;
  
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
});
</script>

云存储文件下载界面

模拟云存储服务的文件下载界面：

<div class="file-browser">
  <div class="file-item">
    <div class="file-icon">
      <i class="fas fa-file-pdf"></i>
    </div>
    <div class="file-info">
      <div class="file-name">项目文档.pdf</div>
      <div class="file-meta">2.4 MB • 2023-05-15</div>
    </div>
    <div class="file-actions">
      <button class="download-btn" data-file="/files/project.pdf" data-name="项目文档.pdf">
        <i class="fas fa-download"></i> 下载
      </button>
    </div>
  </div>
  
  <!-- 更多文件项... -->
</div>

<script>
document.querySelectorAll('.download-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const fileUrl = this.dataset.file;
    const fileName = this.dataset.name;
    
    fetch(fileUrl)
      .then(response => response.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
        setTimeout(() => URL.revokeObjectURL(url), 100);
      });
  });
});
</script>