询问用户使用Node.js保存文件的位置 [英] Ask user where to save file with Node.js

问题描述

我正在使用node-webkit创建一个应用程序，所以有很多javascript。我编写了一个node.js函数，它将拍摄一个屏幕截图并将其保存到磁盘，但是，它将它保存到项目根目录，我想提示用户选择一个保存位置，但我找不到创建保存文件对话框的方法。当前代码：

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:

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：

index.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.

我一直在阅读 node-webkit文件对话框文档但它不是我正在寻找的，或者我无法正常工作。

I have been reading the node-webkit file dialog doc but it is either not what I'm looking for or I cannot make it work properly.

推荐答案

Wiki中的文件对话框页面提到保存对话框文件输入

The File Dialog page in the Wiki mentions a save dialog file input

nwsaveas将打开一个另存为对话框，允许用户输入文件的路径，并且可以选择与默认文件输入标记不同的不存在文件：

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:

您可以在自定义对话框中使用它，如模态或者查询用户输入的内容。

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>

这篇关于询问用户使用Node.js保存文件的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！