火狐浏览器的a标签无法实现下载

Question

问题描述

想通过a标签实现canvas的下载，相同的代码在谷歌浏览器下可行，在火狐下却无法实现

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
var mycanvas = $("#export11").find("canvas")[0];

  var image = mycanvas.toDataURL("image/jpeg");
  var $a = document.createElement('a');
  $a.setAttribute("href", image);
  $a.setAttribute("download", this.state.nowDate + "多能点号图");
  $a.click();

Answer 1

模拟点击出现的问题，在火狐中直接$a.click()是没有效果的，有两种方式可以实现。
方法一：

var image = mycanvas.toDataURL("image/jpeg");
var $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", this.state.nowDate + "多能点号图.jpg");//需要加上后缀名
document.body.appendChild($a);
$a.click();
document.body.removeChild($a);

---

方法二：

var image = mycanvas.toDataURL("image/jpeg");
var $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", this.state.nowDate + "多能点号图.jpg");//需要加上后缀名
const evt = document.createEvent('Event');
evt.initEvent("click", true, true);
$a.dispatchEvent(evt);

Answer 2

$a.click() 改成 $a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

    var mycanvas = $("#export11").find("canvas")[0];
    var image = mycanvas.toDataURL("image/jpeg");

    var $a = document.createElement('a');
    $a.setAttribute("href", image);
    $a.setAttribute("download",  "多能点号图");
    $a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

亲证可用

Answer 3

最后增加一行

    window.URL.revokeObjectURL(image);

你也可以参考我写的：https://github.com/azl3979858...

Answer 4

火狐的话，js创建a标签实现自动下载，需要创建a标签添加到body上，然后执行click操作，下载完之后再移除你创建的标签就好。