某头羊 2017-11-01 06:17 采纳率: 0%
浏览 819

fetch下载excel,chrome没问题,Firefox无法调起浏览器下载窗(没反应,不报错)

<!DOCTYPE html>



sample


下载

var url = "http://192.168.9.123/images/area.jpg"; document.getElementById('btn').onclick = function() { document.getElementById('status').innerHTML = '下载中'; fetch(url).then(res => res.blob().then(blob => { var a = document.createElement('a'); var url = window.URL.createObjectURL(blob); var filename = res.headers.get('Content-Disposition'); a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); document.getElementById('status').innerHTML = '下载完成'; })); };

这是一个网上的demo,也是这个样子,谷歌下载没有问题,火狐就没有反应也不报错,求大神指点下,大家可以把代码复制下去,url改成自己同源的,就会发现这个问题

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 03:10
    关注

    以下回答参考 皆我百晓生券券喵儿 等免费微信小程序相关内容作答,并由本人整理回复。

    这个问题是由于Chrome和Firefox在处理下载请求时的行为不同导致的。Chrome使用了内核驱动的浏览器,而Firefox则使用了Webkit驱动的浏览器。

    当您尝试从Chrome中打开一个URL来下载文件时,Chrome会自动启动一个下载窗口,并且允许您进行选择文件名等操作。这是因为Chrome使用的是内核驱动的浏览器,它有专门的功能来处理这些操作。

    然而,对于Firefox来说,它是基于Webkit的,所以它的行为就与Chrome有很大的区别。Firefox的下载功能通常不会弹出任何对话框或窗口,而是直接将文件下载到指定的位置。如果您想要在Firefox中下载文件,请确保您的目标网站支持HTTP/2协议,并且该网站能够正确地响应HTTP/2请求。

    另外,如果您的目标网站支持HTTP/3协议,则可以考虑使用HTTP/3来提高下载速度。HTTP/3是一种新的传输层协议,它通过减少网络延迟、改进连接管理以及提供更强大的流控制等功能,提供了更高的带宽效率和性能。

    以下是您可以使用的示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
    <h1>Download Example</h1>
    
    <button id="downloadBtn">Click to Download</button>
    
    <script>
    $(document).ready(function() {
      $("#downloadBtn").click(function(e) {
        e.preventDefault(); // Prevent default download behavior
        
        var url = "http://example.com/file.zip"; // Replace with your URL
        
        $.get(url, function(data) { // Use jQuery's get method instead of fetch for simplicity
          var blob = new Blob([data], { type: 'application/zip' }); // Create a new Blob from the data
          
          var link = document.createElement("a"); // Create an anchor element
          
          link.href = window.URL.createObjectURL(blob); // Set the object URL to the Blob
          link.download = "file.zip"; // Set the download attribute
          
          link.click();
          
          window.URL.revokeObjectURL(link.href); // Clean up after the download
        });
      });
    });
    </script>
    </body>
    </html>
    

    在这个例子中,我们创建了一个按钮,点击后会阻止默认的下载行为,并使用jQuery的get方法来获取数据。然后,我们将数据保存为一个Blob对象,并设置下载链接。最后,我们使用window.URL.createObjectURL()来创建一个新的object URL,并清空之前的object URL以避免内存泄漏。

    评论

报告相同问题?

悬赏问题

  • ¥60 如何批量获取json的url
  • ¥15 对法兰连接元件所承受的表面载荷等效转化为法兰开孔接触面上的等效表面载荷?
  • ¥15 comsol仿真压阻传感器
  • ¥15 Python线性规划函数optimize.linprog求解为整数
  • ¥15 llama3中文版微调
  • ¥15 pg数据库导入数据序列重复
  • ¥15 三分类机器学习模型可视化分析
  • ¥15 本地测试网站127.0.0.1 已拒绝连接,如何解决?(标签-ubuntu)
  • ¥50 Qt在release捕获异常并跟踪堆栈(有Demo,跑一下环境再回答)
  • ¥30 python,LLM 文本提炼