HTML 文件直接下载演示

1. 基础用法 (同源文件)

当文件与网页在同一个域名下时，只需在 <a> 标签中添加 download 属性即可。浏览器会强制下载文件，而不是在新标签页中打开它。


                
                
                    
                    
                        保留原始文件名
                        不指定 download 的值，浏览器使用 URL 中的文件名。
                        
                            <a href="sample.pdf" download>

                              下载 PDF 文件

                            </a>
                        
                        
                        
                             下载示例 PDF
                        
                    


                    
                    
                        自定义保存文件名
                        指定 download 的值，用户保存时将使用此名称。
                        
                            <a href="report.docx" download="2026年度报告.docx">

                              下载报告

                            </a>
                        
                        
                             下载重命名文件



            
            
                2. 跨域文件与 JavaScript 增强
                
                    注意： download 属性仅在同源（Same-Origin）策略下有效。
                    如果文件位于不同的域名（如 CDN），浏览器通常会忽略该属性并直接打开文件。
                    此时需要配合后端设置 Content-Disposition: attachment 响应头，或使用 JavaScript Fetch API。
                


                
                    
                        
                            
                        
                        
                            
                                跨域链接示例：<a href="https://cdn.example.com/file.zip" download> 
                                在大多数现代浏览器中，这只会打开新标签页，而不会触发下载对话框。
                            
                        
                    
                

                
                    JavaScript 动态下载方案 (Fetch + Blob)
                    适用于跨域资源或动态生成的内容。通过 Fetch 获取二进制流，创建 Blob URL 触发下载。
                    
                    
async function downloadFile(url, filename) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href); // 释放内存
  } catch (error) {
    console.error('Download failed:', error);
  }
}
                    
                    
                    
                
            


            
            
                3. 最佳实践总结
                
                    同源优先： 尽量将可下载文件部署在与网页相同的域名下，以确保 download 属性生效。

                    后端控制： 对于跨域文件，最可靠的方法是在服务器端设置响应头 Content-Disposition: attachment; filename="name"。
                    MIME 类型： 确保服务器返回正确的 Content-Type。对于未知类型，使用 application/octet-stream 可强制浏览器下载。
                    移动端兼容： iOS Safari 对 download 属性支持有限，建议结合后端响应头或使用专门的 App 内下载逻辑。

                    用户体验： 为大文件下载添加加载状态提示，避免用户重复点击。