如何用原生Javascript从URL读取zip文件并转换为ArrayBuffer

推荐方案：使用fetch API（适配现代浏览器） #

fetch是现代浏览器原生支持的网络请求API，内置响应内容直接支持直接转ArrayBuffer的原生方法，实现逻辑非常简洁：

// 替换为你的zip文件实际地址
const zipUrl = 'https://example.com/myfile.zip';

fetch(zipUrl)
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error('网络请求失败，状态码：' + response.status);
    }
    // 直接将响应转为ArrayBuffer格式
    return response.arrayBuffer();
  })
  .then(buffer => {
    // 这里拿到的buffer就是你需要的ArrayBuffer，直接传入你的库方法即可
    // 调用示例：
    shp(buffer).then(function(geojson){
      // 后续处理geojson的逻辑写在这里
    });
    // 或者调用parseZip方法
    // const zipResult = shp.parseZip(buffer);
  })
  .catch(error => {
    // 处理请求或转换过程中的报错
    console.error('加载zip文件出错：', error);
  });

兼容旧浏览器方案：使用XMLHttpRequest #

如果需要兼容IE等不支持fetch的旧浏览器，可以用XMLHttpRequest实现：

const zipUrl = 'https://example.com/myfile.zip';
const xhr = new XMLHttpRequest();
xhr.open('GET', zipUrl, true);
// 指定响应类型为arraybuffer
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    const buffer = xhr.response;
    // 拿到buffer后调用你的库方法
    shp(buffer).then(function(geojson){
      // 后续处理逻辑
    });
  } else {
    console.error('请求失败，状态码：' + xhr.status);
  }
};

xhr.onerror = function () {
  console.error('网络请求发生错误');
};

xhr.send();

注意事项 #

• 如果你请求的zip文件地址和你当前的网站域名不同，需要目标服务器配置跨域资源共享（CORS）规则，否则浏览器会因为跨域限制拦截请求。

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