火狐浏览器的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}));

亲证可用