5

Following my previous question here,

I have a desktop application using Electron platform and Javascript where I am converting an HTML5 canvas to JPEG using:

<a id="download" download="Path.jpg">Download JPG</a>

then,

function download(){ 
    var dt = canvas.toDataURL('image/jpeg');
    this.href=dt; 
}
document.getElementById('download').addEventListener('click', download, false);

This refreshes my whole application. How can I change this behavior, such that the page does not refresh when the download attribute is clicked?

rrz0
  • 2,182
  • 5
  • 30
  • 65
  • 1
    Will this be useful? https://stackoverflow.com/questions/38067298/saving-files-locally-with-electron – Adriano Dec 15 '17 at 10:08
  • add `target="_blank"` in your anchor tag to stop the refresh – Ashok Vishwakarma Mar 07 '18 at 16:38
  • Hi @AshokVishwakarma, unfortunately this does not work for me . I still get the whole application refreshing. – rrz0 Mar 07 '18 at 16:41
  • @Rrz0, i think your code has some other issue which may be causing the refresh. Because your approach should work as it is in Chrome/Electron – Tarun Lalwani Mar 07 '18 at 17:26
  • @TarunLalwani, it could be but this is highly unlikely. I do not (think that I) have anything else which may cause this refresh. According to Kaiido, in an answer from my previous question, "The problem is with Electron's implementation of the download attribute", but I am not sure about this. – rrz0 Mar 07 '18 at 17:30
  • Can you create a minimal git repo with all packages you are using? So we can debug – Tarun Lalwani Mar 07 '18 at 17:41

2 Answers2

2

I can think of this two snippets, one using blob and one using the download element. external-library: FileSave.js

// this one use FileSaver.js library
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

// or this way using download element.
// here you can encode your image-data and then send it.
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(imageData));
download.setAttribute('download', 'file.jpg');

also I found this one just now, electron specific solution : Saving files locally with electron

nullqube
  • 2,959
  • 19
  • 18
  • I have tried the second code snippet followed by `document.getElementById...` and indeed it does not refresh. Upon pressing save, the application is not refreshed, but the image is not being saved! – rrz0 Mar 07 '18 at 17:04
  • sorry u mean nothing happened (nothing come up)? or the file was not the right format? what about the first one? I'll check them now – nullqube Mar 07 '18 at 17:13
  • Second snippet, did not refresh the application, but the image was not saved. Completely not saved, and not simply wrong format. – rrz0 Mar 07 '18 at 17:16
1

Edit your anchor tag a bit

<a id="download" download="Path.jpg" target="_blank" onClick="download();">Download JPG</a>

And then your download function 

function download(event){
    event.currentTarget.href = canvas.toDataURL('image/jpeg');
}

This might help

Ashok Vishwakarma
  • 669
  • 7
  • 20