Question

我正在编写一个NodeJS Electron App，可以在所有平台上发布。我有一个下载按钮，我想打开一个“另存为”对话框，其中包含从服务器提供的文件。有人知道最好的方法吗？

以下是我在本地运行节点应用程序时尝试过的功能，但在使用electron-packager打包应用程序后失败了：

将window.location.href设置为文件的位置
将隐藏的iframe的src设置为文件的位置

运行打包的mac应用程序时，＆＃34;做了失败加载＆＃34;触发事件并阻止显示“另存为”对话框。查看网络请求时，我可以看到该文件已从服务器成功检索到。我似乎无法弄清楚为什么＆＃34;做失败负载＆＃34;事件正在被解雇。

Answer 1

在电子文档https://github.com/atom/electron/blob/master/docs/api/dialog.md

上查看此页面

有一个关于 dialog.showSaveDialog

的部分

然后，您可以使用保存对话框中的URL，使用与下面类似的功能将其保存到该位置。

session.on('will-download', function(event, item, webContents) {
  event.preventDefault();
  require('request')(item.getUrl(), function(data) {
    require('fs').writeFileSync('/somewhere', data);
  });
});

在此页面https://github.com/atom/electron/blob/master/docs/api/session.md

上找到

Answer 2

在HTML按钮上：

<button onclick='myUrlSaveAs("http://www.example.com/path/to/file.jpg")'>Save As</button>

在您的javascript文件中：

// Include in the render side
var elerem = require('electron').remote;
var dialog = elerem.dialog;
var app = elerem.app;

var http = require('http');
var fs = require('fs');
var path = require('path');


function myUrlSaveAs(remoteUrl){
    // app.getPath("desktop")       // User's Desktop folder
    // app.getPath("documents")     // User's "My Documents" folder
    // app.getPath("downloads")     // User's Downloads folder

    var toLocalPath = path.resolve(app.getPath("desktop"), path.basename(remoteUrl) 

    var userChosenPath = dialog.showSaveDialog({ defaultPath: toLocalPath });

    if(userChosenPath){
        download (remoteUrl, userChosenPath, myUrlSaveAsComplete)
    }


}

function myUrlSaveAsComplete(err){
    alert("done");
}


function download (url, dest, cb) {
    var file = fs.createWriteStream(dest);
    var request = http.get(url, function(response) {
        response.pipe(file);
        file.on('finish', function() {
            file.close(cb); // close() is async, call cb after close completes.
        });
    }).on('error', function(err) { // Handle errors
        fs.unlink(dest); // Delete the file async. (But we don't check the result)
        if (cb) cb(err.message);
    });
};

Answer 3

下面是一个示例，如果您只想使用渲染器。在单击上Electron将显示标准浏览器的“另存为”对话框。不需要remote或fs。

<!--html-->
<button onclick="saveFile()">SAVE AS</button>

在渲染器javascript文件中：

// renderer javascript file
function saveFile() {
    const content = "File content to save";
    const element = document.createElement("a");
    const file = new Blob([content], {type: "text/plain"});
    element.href = URL.createObjectURL(file);
    element.download = "file.txt";
    element.click();
}

（我在Mac上，还没有在Windows计算机上尝试过）

如何在Electron App中显示“另存为”对话框？

3 个答案: