javascript 询问用户使用 Node.js 保存文件的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17558126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ask user where to save file with Node.js
提问by Jake Sellers
I'm creating an app using node-webkit, so there's a lot of javascript. I have written a node.js function that will take a screen shot and save it to the disk, however, it saves it to the project root dir and I would like to prompt the user to choose a save location, but I cannot find a way to create a save file dialog. Current code:
我正在使用 node-webkit 创建一个应用程序，所以有很多 javascript。我已经编写了一个 node.js 函数，它将截取屏幕截图并将其保存到磁盘，但是，它将它保存到项目根目录中，我想提示用户选择一个保存位置，但我找不到创建保存文件对话框的方法。当前代码：
screen_shot.js:
screen_shot.js：
var fs = require('fs');
exports.buildFile = function(name, value) {
var img = new Buffer(value, encoding='base64');
fs.writeFile(name, img, function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
};
index.html:
索引.html：
...
<script>
var sc= require('screen_shot');
function wait() {
$('#close-popup').click();
setTimeout(function() {screen_shot()}, 10);
}
function screen_shot() {
html2canvas($('body'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").split(',')[1];
var decodedImg = window.atob(img);
sc.buildFile("sc.png", img);
}
});
}
</script>
...
<a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a>
The wait function is just to give the popup I'm using time to close before the screenshot is taken.
等待功能只是为了在截取屏幕截图之前给我正在使用的弹出窗口关闭时间。
I have been reading the node-webkit file dialog docbut it is either not what I'm looking for or I cannot make it work properly.
我一直在阅读node-webkit 文件对话框文档，但它要么不是我要找的，要么无法使其正常工作。
回答by Manuel G?rlich
The File Dialog page in the Wiki mentions a save dialog file input
Wiki 中的文件对话框页面提到了保存对话框文件输入
nwsaveas will open a save as dialog which let user enter the path of a file, and it's possible to select a non-exist file which is different with the default file input tag:
nwsaveas 将打开一个另存为对话框，让用户输入文件的路径，并且可以选择与默认文件输入标签不同的不存在的文件：
You could use that in an custom dialog like a modal or so to query the user for that input.
您可以在像模态这样的自定义对话框中使用它来查询用户的输入。
Very basic example based on your provided code:
基于您提供的代码的非常基本的示例：
<script>
var fs = require('fs');
var buildFile = function(name, value) {
var img = new Buffer(value, 'base64');
fs.writeFile(name, img, function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
}
function wait() {
$('#close-popup').click();
setTimeout(function() {screen_shot()}, 10);
}
function screen_shot() {
html2canvas($('body'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").split(',')[1];
var decodedImg = window.atob(img);
query_for_save_path(function (save_path) {
buildFile(save_path, img);
alert('Screenshot saved to: ' + save_path);
});
}
});
}
function query_for_save_path(cb) {
$('#dialog').show();
$('#dialog input').one('change', function (event) {
cb($(this).val());
});
}
</script>
<a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a>
<div id="dialog" style="display:none;">
Choose a path to save your shot:
<input type="file" nwsaveas />
</div>
