js根据URL下载文件

2024年3月9日 60次阅读 来源: Syyyyy_

两种情况

  • url经过后端处理，返回的是文件流
  • url没有经过后端处理，返回的是文件存储地址url

第一种情况：

  • window.open('url')
    缺点：会打开一个新的窗口，请求完成后自动关闭，用户体验不是特别好，但是问题不大
  • <a href="url" download="文件名"></a>
    虽然不会打开新弹窗，但是兼容性不好，IE 需要>IE13，safari暂未支持

第二种情况：
上面的方法对于第二种情况，都只是跳转页面并展示图片，但是并不会自动下载

使用canvas将地址url转换成dataurl

Data URLs 由四个部分组成：前缀 (data:)、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身，

方法：

function downloadQrCodeByBase64(dataUrl, fileName) { 
  const img = new Image();
  img.onload = () => { 
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 将画布内容转换为base64
    const base64 = canvas.toDataURL();
    const a = document.createElement('a');
    a.href = base64;
    a.download = fileName;
    // 触发a链接点击事件，浏览器开始下载文件
    a.click();
  };
  img.src = dataUrl;
  // 必须设置，否则canvas中的内容无法转换为base64
  img.setAttribute('crossOrigin', 'Anonymous');
}

缺点：图片越大，转换后的 base64 编码越长，尽量避免对大图进行 DataURL 转换，防止转换后的长度超出浏览器限制

    原文作者：Syyyyy_
    原文地址: https://blog.csdn.net/weixin_43859703/article/details/109807587
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞