火狐浏览器下a链接的download属性下载失败

Question

如图，是一个canvas转成的img下载，在chrome下可以下载，但是在火狐下没有反应。这是怎么回事，怎么修改？

Answer 1

我之前写一个拼图工具的时候用到了，代码贴出来
工具：http://screenshots.hpday.cn
都是通过取得base64，然后本地保存成图片
//html

<a id="dl" download="截图.jpg"></a>

//js

      var canvas = document.getElementById("showThumbnails");
      var ctx = canvas.getContext("2d");
      var btnDl = document.getElementById("dl");
      if (canvas.msToBlob){
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, '截图.png');
      }else{
        var dt = canvas.toDataURL('image/jpeg', '1.0');
        dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
        dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=截图.jpg');
        btnDl.href = dt;
        btnDl.click();
      }

兼容chrome firefox IE11 edge ，我只测试了这些，IE再低应该不支持了

Answer 2

火狐中，需要把 a 标签添加到页面中，就可以了

document.body.appendChild(aLink);
aLink.style.display='none';

Answer 3

e.target.result 长度超出10几兆 如何下载呢

Answer 4

a标签加个download，

<a href="XXX.jpg" download=""> //可以写，写了下载名称就是这个名字