浏览器下载文件并不简单，看完这个你就懂了！

2023-04-20 14:44:20

如何下载文件：从同源到跨域

在浩瀚的互联网世界中，下载文件已经成为我们的日常操作之一，无论是文档、图片还是视频。而下载过程的背后，却隐藏着一些不为人知的秘密，尤其是当文件较大或涉及跨域情况时，浏览器会束手无策。本文将揭开这些秘密，手把手教你如何解决这些下载难题。

同源下的文件下载

所谓同源，是指文件和当前页面位于同一个域下。在同源的情况下，下载文件可谓轻而易举。只需一个<a>标签，就能实现文件预览或下载：

<a href="file.pdf">下载文件</a>

当用户点击这个超链接时，浏览器会自动下载文件。默认情况下，下载文件的名称与超链接文件名称相同。但如果我们想更改下载文件的名称，可以在<a>标签中添加download属性，并指定下载文件的名称：

<a href="file.pdf" download="new_file_name.pdf">下载文件</a>

跨域下的文件下载

跨域是指，文件和当前页面位于不同的域下。在跨域的情况下，浏览器无法直接下载文件。这是因为，跨域请求受到同源策略的限制。

为了解决这个问题，我们可以使用以下技巧：

1. 使用<iframe>标签

我们可以将文件嵌入到<iframe>标签中，然后使用JavaScript来下载文件：

<iframe src="file.pdf"></iframe>

<script>
  // 获取 iframe 元素
  var iframe = document.querySelector('iframe');

  // 监听 iframe 的 load 事件
  iframe.onload = function() {
    // 获取 iframe 的内容窗口
    var contentWindow = iframe.contentWindow;

    // 获取 iframe 中的文件链接
    var fileLink = contentWindow.document.querySelector('a[href$=".pdf"]');

    // 模拟点击文件链接
    fileLink.click();
  };
</script>

2. 使用XMLHttpRequest对象

我们可以使用XMLHttpRequest对象来向服务器发送请求，并获取文件内容：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/octet-stream');

// 设置请求 URL
xhr.open('GET', 'file.pdf');

// 监听请求状态变化
xhr.onreadystatechange = function() {
  // 请求完成
  if (xhr.readyState === 4) {
    // 请求成功
    if (xhr.status === 200) {
      // 获取文件内容
      var fileContent = xhr.response;

      // 将文件内容保存到本地
      saveFile(fileContent, 'new_file_name.pdf');
    }
  }
};

// 发送请求
xhr.send();