下载属性的电子问题答案

【问题标题】：Electron issue with download attribute下载属性的电子问题
【发布时间】：2018-05-29 09:32:46
【问题描述】：

按照我之前的问题here，

我有一个使用 Electron 平台和 Javascript 的 桌面应用程序，我正在使用以下方法将 HTML5 画布转换为 JPEG：

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

那么，

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

这刷新了我的整个应用程序。如何改变这种行为，使得点击下载属性时页面不刷新？

【问题讨论】：

这会有用吗？ stackoverflow.com/questions/38067298/…
在您的锚标签中添加target="_blank" 以停止刷新
嗨@AshokVishwakarma，不幸的是这对我不起作用。我仍然让整个应用程序焕然一新。
@Rrz0，我认为您的代码还有其他问题，可能会导致刷新。因为您的方法应该像在 Chrome/Electron 中一样工作
@TarunLalwani，可能是这样，但这不太可能。我没有（认为我）有任何其他可能导致此刷新的东西。根据 Kaiido 的说法，在我之前的问题的回答中，“问题在于 Electron 的下载属性的实现”，但我对此不确定。

标签： javascript html download electron

【解决方案1】：

我可以想到这两个 sn-ps，一个使用 blob，一个使用下载元素。外部库：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');

我刚才也找到了这个，电子特定的解决方案： Saving files locally with electron

【讨论】：

我已经尝试了第二个代码 sn-p 后跟 document.getElementById... 并且确实它没有刷新。按保存后，应用程序没有刷新，但图像没有被保存！
对不起，你的意思是什么都没发生（什么都没发生）？或者文件格式不正确？第一个呢？我现在去检查一下
第二次sn-p，没有刷新应用，但是图片没有保存。完全没有保存，而且不只是格式错误。

【解决方案2】：

稍微修改你的锚标记

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

然后是你的下载功能

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

这可能会有所帮助

【讨论】：

感谢您的完整回答。也会尝试这个实现。
由于某种原因，当我显然有一个名为 download 的函数时，我得到了 download is not a function。
你的下载功能是全球性的吗？
另一种方法是使用 document.getElementById('download').addEventListener('click', download, false); 添加相同的内容并删除锚标记上的 onClick 属性
很遗憾，实现了上面的代码，整个应用程序仍然在刷新。