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