Atom-shell + AngularJS - 如何打開文件保存對話框？

所以我正在開發一個使用Atom-shell和AngularJS的本地OSX/Windows應用程序。我試圖打開一個文件保存對話框。Atom-shell + AngularJS - 如何打開文件保存對話框？

Atom的外殼有一個「對話」 API：

https://github.com/atom/atom-shell/blob/master/docs/api/dialog.md

我可以使用此API從我的原子殼層安裝JS文件（main.js）：

var app = require('app'); // Module to control application life. 
var dialog = require('dialog'); 
var BrowserWindow = require('browser-window'); // Module to create native browser window. 

// Report crashes to our server. 
require('crash-reporter').start(); 

// Keep a global reference of the window object, if you don't, the window will 
// be closed automatically when the javascript object is GCed. 
var mainWindow = null; 

// Quit when all windows are closed. 
app.on('window-all-closed', function() { 
    if (process.platform != 'darwin') 
    app.quit(); 
}); 

// This method will be called when atom-shell has done everything 
// initialization and ready for creating browser windows. 
app.on('ready', function() { 
    // Create the browser window. 
    mainWindow = new BrowserWindow({width: 1200, height: 800}); 

    // and load the index.html of the app. 
    mainWindow.loadUrl('file://' + __dirname + '/index.html'); 

    console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]})); 

    // Emitted when the window is closed. 
    mainWindow.on('closed', function() { 
    // Dereference the window object, usually you would store windows 
    // in an array if your app supports multi windows, this is the time 
    // when you should delete the corresponding element. 
    mainWindow = null; 
    }); 
});

但這對我沒有任何好處 - 它只是在我首次通過Atom-shell運行應用程序時打開一個文件對話框。如何從我的AngularJS應用程序中訪問此對話框API？我基本上需要一個「下載CSV文件」按鈕。當我嘗試在我的角度應用程序（app.js）中需要「對話框」時，出現「模塊未找到」錯誤。這是我的AngularJS應用程序的index.html：

<!DOCTYPE html> 
<html ng-app="socialWorkerProApp"> 

    <head> 
     <title>Social Worker Pro</title> 

     <script src="node_modules/angular/angular.js"></script> 
     <script src="node_modules/angular-route/angular-route.js"></script> 
     <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script> 
     <script src="bower_components/angular-native-picker/build/angular-datepicker.js"></script> 

     <script src="js/app.js"></script> 
     ...

當我嘗試加入這行來app.js：

var dialog = require('dialog');

我得到的「模塊未找到」的錯誤，這是有道理的，因爲它不是一個nodejs模塊，它在Atom-shell中。那麼如何從我的AngularJS應用程序中訪問這些方法？

這裏的下載CSV按鈕：

<button ng-click="downloadClientsCSV()" class="btn btn-primary"><i class="icon ion-android-download"></i>Download CSV</button>

而且downloadClientsCSV（）生成一個CSV文件，並應彈出打開一個文件保存對話框。我嘗試過使用「hidden input element，click（）」方法，並嘗試了「window.open（data ...）」方法，該方法適用於Web應用程序環境，但Atom-shell不喜歡它 - 只是打開一個空白的瀏覽器窗口。

想法？

來源

2015-01-20 Devin Mooers

我要補充一點，我沒有使用任何明確或HTTP客戶端/服務器拆分，只是Atom的外殼內運行角度直接。 – 2015-01-20 20:59:12

啊，剛剛在原子殼中發現了遠程模塊。 D'哦！

https://github.com/atom/atom-shell/blob/master/docs/api/remote.md

來源

2015-01-20 23:31:34

是的，「遠程」API是做到這一點的最佳方式。您還可以使用IPC模塊在瀏覽器和渲染器之間傳遞消息，但對於這種簡單的一次性操作，遠程模塊更容易 – 2015-01-21 04:47:06

我發現與Mooers相同的問題。我的解決辦法是這樣的代碼：

var remote = require('remote'); 
var dialog = remote.require('dialog');

來源

2015-10-06 19:33:14 Simon

Atom-shell + AngularJS - 如何打開文件保存對話框？

回答

相關問題