解决从 ESP32 Web 服务器下载 JavaScript 文件的问题

解决方案 1：在 JavaScript 中使用 Fetch API 进行下载

该脚本使用现代 Fetch API 从 ESP32 下载文件，并正确处理 blob 数据以进行文件保存。

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

解决方案 2：具有更好处理能力的 XMLHttpRequest 替代方案

该脚本通过正确处理响应并创建锚元素来触发下载来改进原始 XMLHttpRequest 代码。

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

解决方案3：基本HTML下载属性方法

此解决方案使用带有下载属性的简单 HTML 锚标记，该标记不需要 JavaScript，但可作为后备解决方案。

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

单元测试：在不同浏览器中获取 API 测试

该脚本包括基本单元测试，用于验证 Fetch API 方法是否可以跨不同环境进行下载。

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

有关从 ESP32 下载 JavaScript 文件的常见问题

1. 为什么我可以从地址栏下载，但不能在 JavaScript 中下载？
2. 从地址栏直接下载绕过 JavaScript 和 CORS 策略。你需要使用正确的 fetch() 或者 XMLHttpRequest JavaScript 中正确处理响应的方法。
3. 与 XMLHttpRequest 相比，使用 Fetch API 有何优势？
4. Fetch API 提供了更清晰的语法、更好的承诺处理以及通过以下方法处理文件下载时提高的灵活性 response.blob()。
5. 我是否需要更改服务器设置才能使 Fetch API 正常工作？
6. 否，但要确保服务器设置正确的标头和 MIME 类型（例如， text/csv 对于 CSV 文件）对于客户端的正确处理至关重要。
7. 如何使用 JavaScript 触发文件下载？
8. 在 JavaScript 中使用以下命令创建锚元素 document.createElement('a') 方法，分配 download 属性，并触发点击事件。
9. 我可以不使用 JavaScript 下载文件吗？
10. 是的，使用简单的 HTML 锚标记 download 属性是无需任何 JavaScript 代码即可启用文件下载的简单方法。

关于 JavaScript 文件下载问题的最终想法

从 ESP32 网络服务器下载 JavaScript 文件的问题通常是由于浏览器处理请求和安全策略的方式不同而引起的。使用 Fetch API 或 XMLHttpRequest 可以更好地控制这些下载，确保它们得到正确处理。

使用正确的 MIME 类型配置 ESP32 Web 服务器并使用灵活的 JavaScript 方法（例如 Fetch）非常重要，它可以提供更好的错误处理和承诺。通过实施正确的方法，开发人员可以轻松管理嵌入式环境中的文件下载。