electron 如何在电子应用程序中显示“另保存为”对话框?

a0x5cqrl  于 2022-12-08  发布在  Electron
关注(0)|答案(4)|浏览(261)

我正在写一个NodeJS电子应用程序在所有平台上分发。我有一个下载按钮,我想弹出一个保存为对话框与文件正在提供的服务器。有人知道最好的方法来做到这一点吗?
以下是我在本地运行节点应用程序时尝试过的工作方式,但在我使用电子打包程序打包应用程序后失败:

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

当运行打包的mac应用程序时,“did-fail-load”事件被触发,并阻止“保存为”对话框显示。当查看网络请求时,我可以看到文件从服务器成功检索。我似乎不明白为什么“did-fail-load”事件被触发。

ux6nzvsh

ux6nzvsh1#

请在电子文档https://github.com/atom/electron/blob/master/docs/api/dialog.md上查看此页
有一个关于对话框的部分。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

pjngdqdw

pjngdqdw2#

如果你只想使用渲染器,下面是一个例子。点击电子将显示标准浏览器的保存为对话框。不需要remotefs

<!--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机器上试过)

gwo2fgha

gwo2fgha3#

在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);
    });
};
cwdobuhd

cwdobuhd4#

我遇到这个问题是为了寻找相反的效果--如何在电子应用程序中下载一个文件而不显示保存对话框。
如果您在will-download事件处理程序中设置了路径,那么Electron将跳过显示对话框。例如(从https://www.electronjs.org/docs/latest/api/download-item

// In the main process.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.webContents.session.on('will-download', (event, item, webContents) => {
  // Set the save path, making Electron not to prompt a save dialog.
  item.setSavePath('/tmp/save.pdf')
})

相关问题