electron中对于下载资源，断网检测实现方案

原创

yaogengzhu

修改于 2023-12-12 17:13:07

2730

修改于 2023-12-12 17:13:07

方案：我们采用一般大家常用的下载方案：

export const downloadByLink = (href: string, name = '', blank = false) => {
  const link = document.createElement('a');
  link.style.display = 'none';
  blank && link.setAttribute('target', '_blank');
  link.href = href;
  link.download = name;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

以为这样就可以解决了，但是又没有完全解决，测试断网后，又出现了一个其他问题，下载的资源是一个变成txt 文件，也就是一些错误信息。原本这样也是OK，但是提出一个要求，需要提示用户断网了

OK，此时又来一个方案：

那我们可以利用浏览器自带的API navigator.onLine，进行检测，这里我们用的 vueuse的API实现。

export const downloadByLink = (href: string, name = '', blank = false) => {
  const online = useOnline();
  if (!online.value) {
    MessagePlugin.error('网络异常，请检查网络连接');
    return;
  }
  const link = document.createElement('a');
  link.style.display = 'none';
  blank && link.setAttribute('target', '_blank');
  link.href = href;
  link.download = name;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

哈哈哈，终于解决了:zy:，突然.... 这该死的Window机器 ? 断开WiFi, 它竟然不能检测出来，哎:qd:...., 这种情况如下：

浏览器中，自己调整网络状态为断开状态，不管是Windows、mac 均能检测网络断开，能正常提示用户。
mac 主动断开WiFi，也能正常提示用户。
windows 断开WiFi，竟然不能检测出断开网络。

俺心态崩了，这可咋整？出了问题，咱得解决，又想了一个利用aixos 请求的方案

首先检测这个网络请求是否能正常被调用，状态码 >= 200 & < 500 ，认为是一个正常请求。

export const downloadByLinkPro = async (href: string | object, name = '', blank = false) => {
  const online = useOnline();
  let url = href;
  if (typeof href === 'object' && href instanceof Blob) {
    // 创建blob地址
    url = URL.createObjectURL(href);
  }
  // 检查资源是否可用
  const checkResource = async () => {
    const message = MessagePlugin.loading('正在下载资源...');
    try {
      const response = await axios.get(url as string);
      return response.status >= 200 && response.status < 500;
    } catch (error) {
      return false;
    } finally {
      MessagePlugin.close(message);
    }
  };

  const downloadFile = async () => {
    const isResourceAvailable = await checkResource();
    if (isResourceAvailable) {
      const link = document.createElement('a');
      blank && link.setAttribute('target', '_blank');
      link.href = url as string;
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      MessagePlugin.error('资源无法下载，请检查您的网络后重试。');
    }
  };

  if (online.value) {
    await downloadFile();
  } else {
    MessagePlugin.error('网络连接已断开，请检查您的网络设置。');
  }
};

最终形态，可以解决测试提出的一些问题。但是我觉得这里带来了一个弊端是, 每次检测是带来的一些时间的耗费，因此做了一个正在下载资源... ，其实这种是浪费资源的操作，不知道大家是否有更好的方案呢？

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第四期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第四期

#eletron

#vue

登录后参与评论

0 条评论

热度