The a tag of Firefox cannot be downloaded.

problem description

want to download canvas through a tag. The same code is feasible in Google browser, but not in Firefox.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
var mycanvas = $("- sharpexport11"). 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();

Apr.16,2021

simulates the problems caused by clicks. Directly $a.click () has no effect in Firefox. There are two ways to achieve it.
method 1:

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);
< hr >

method 2:

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);

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

    var mycanvas = $("-sharpexport11").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}));

parent certificate is available


add one line at last

    window.URL.revokeObjectURL(image);

you can also refer to what I wrote: https://github.com/azl3979858.

. For

Firefox, js creates a tag to download automatically. You need to create a tag to add to body, then perform click operation, and then remove the tag you created after download.

Menu