添加download属性后超链接下载文件损坏，右键另存为正常？

背景 #

我司内部网络用于共享数字蓝图和文档，但原超链接点击无法下载文档，IT部门未处理该问题，因此我编写脚本优化使用体验——给符合文档链接特征的<a>元素添加download属性。但出现异常：部分带数字签名的PDF文件，通过添加download属性的链接点击下载后损坏，右键选择「另存为」下载则完全正常。

脚本与链接示例 #

脚本伪代码 #

// 遍历所有不含 dl-added 类的<a>元素
if (看起来是文档链接) {
  link.setAttribute("download", "")
  link.classList.add("dl-added")
}

链接对比 #

• 未添加脚本的原始链接：

<a href="http://cdn.company-name.com:5000/upload/1234-5678-abcd/name-of-doc%20%A2%BC%D2%E9%78%90.pdf">name</a>

• 添加脚本后的链接：

<a href="http://cdn.company-name.com:5000/upload/1234-5678-abcd/name-of-doc%20%A2%BC%D2%E9%78%90.pdf" download class="dl-added">name</a>

文件内容对比 #

通过HxD工具检查发现，两种方式下载的文件前约140KB内容完全一致，但剩余约490KB内容存在差异：

• 右键「另存为」的正常PDF二进制片段：

%PDF-1.7..%;sÅx..1 0 obj 
......
startxref..661568..%%EOF.. 

• 带download属性下载的损坏文件二进制片段：

%PDF-1.7..%;sÅx..1 0 obj 
......
uÛ±1LFIáxw4Ñ#Of²..

核心区别与原因 #

两种下载方式的本质差异在于浏览器的处理逻辑：

1. 右键「另存为」：浏览器直接向服务器发起GET请求，接收原始二进制数据流，不做任何编码转换，直接写入本地文件，完全保留服务器返回的原始内容。
2. 带download属性的链接点击：浏览器会先获取资源，再通过Blob/File API进行转换后触发下载。若服务器返回的响应头存在以下问题，就会导致二进制内容损坏：
   • Content-Type设置错误（比如设为text/plain而非application/pdf），浏览器会将二进制内容按文本编码解析，再转成二进制写入，破坏原始结构。
   • 错误设置了charset或Content-Encoding响应头，浏览器错误地对二进制内容进行解码/重新编码，篡改了原始数据。
   • 大文件分块传输时，download的处理逻辑在拼接分块数据时出现错误，导致后续内容乱码。

而带数字签名的PDF对二进制完整性要求极高，一旦内容被篡改，就会出现文件损坏的情况。

解决方向 #

1. 替换直接添加download属性的逻辑，通过fetch获取原始二进制流后再触发下载，确保全程按二进制处理：

// 给目标链接绑定点击事件
link.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  fetch(this.href, { responseType: 'blob' }) // 指定以二进制Blob形式获取资源
    .then(response => response.blob())
    .then(blob => {
      const tempUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = tempUrl;
      downloadLink.download = ''; // 保留原文件名
      downloadLink.click();
      URL.revokeObjectURL(tempUrl); // 释放临时URL资源
    });
});

2. 联系IT部门检查CDN服务器的响应头配置，确保PDF文件的Content-Type为application/pdf，且不设置错误的charset参数。

内容的提问来源于stack exchange，提问作者Byzod