지난번 Angular 에서의 Electron 이벤트 호출 할 수 있었으므로, 다음은 로컬 파일 호출.

파일 호출 처리 추가

localFileModule.js 추가

main.js가 궁극적으로 엉망이 되더라도 싫어서 localFileModule.js를 만듭니다.

const {shell} = require('electron');

// ファイル呼び出しボタンが押されたとき
exports.openFile = function () {
  shell.openItem('[your file path]');
}

로서 main.js 는

const { app, BrowserWindow, ipcMain } = require('electron');
const lfm = require('./localFileModule.js');
let win;

function createWindow() {

  // ウインドウの作成
  win = new BrowserWindow({
    width: 800
    , height: 400
    , webPreferences: {
      nodeIntegration: true
    }
  })

  // ウインドウに表示する内容
  win.loadFile('dist/sample1/index.html');

  // デバッグ画面表示
  win.webContents.openDevTools();

  // このウインドウが閉じられたときの処理
  win.on('closed', () => {
    win = null;
  })
}

// アプリが初期化されたとき（起動されたとき）
app.on('ready', () => {
  createWindow();
})

// 全ウインドウが閉じられたとき
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

// アクティブになったとき（MacだとDockがクリックされたとき）
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
})

// ファイル呼び出し
ipcMain.on('callFile', (event, arg) => {
  lfm.openFile();
})

하여 둔다.

Angular에서 버튼 클릭으로 파일 호출

/sample1/src/app/app.component.ts 를 아래에.

import { Component } from '@angular/core';
import { IpcRenderer } from 'electron';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent {
  public title = 'sample1';
  private ipc: IpcRenderer;

  constructor() {
    if ((window as any).require) {
      try {
        this.ipc = (window as any).require('electron').ipcRenderer;
      } catch (e) {
        throw e;
      }
    } else {
      console.warn('App not running inside Electron!');
    }
  }

  // ボタンクリックで ipc の指定イベント呼び出し
  public clickcallFileBtn() {
    this.ipc.send('callFile');
  }
}

로
/sample1/src/app/app.component.html

<button type="button" name="button" (click)="clickcallFileBtn()">
  ファイル呼び出し
</button>

동작 확인

npm run start:electron

에서 빌드, 버튼 클릭으로 지정 파일의 호출이 가능하게.

파일이 없는 경우

파일이 존재하지 않는 경우, 화면상에는 에러가 나오지 않기 때문에 그 대응으로서, 파일의 존재 체크 처리를 추가. 파일이 존재하지 않는 경우는 다이얼로그를 표시하도록(듯이) 한다. localFileModule.js 를 다음과 같이 편집.

const {shell} = require('electron');
const fs = require('fs');
const fsPromises = fs.promises;
const { dialog } = require('electron');

//openFileボタンが押されたとき（ファイル名取得まで）
exports.openFile = function () {
  const filePath = '[your file path]';

  fsPromises.access(filePath, fs.constants.R_OK | fs.constants.W_OK)
    .then(() => shell.openItem(filePath))
    .catch(() => showMessageBox());
}

// ダイアログメッセージ表示
function showMessageBox() {
  var options = {
    type: 'info',
    buttons: ['OK'],
    title: 'File not found',
    message: 'File not found',
    detail: 'ファイルが見つかりませんでした'
  };

  dialog.showMessageBox(null, options);
}

감상

로컬 파일 호출이 보통으로 되어 있을까 보안적으로 어떨까 하는 의문은 있지만, 브라우저로 넘을 수 없는 벽을 정말 쉽게 넘어 야베.