Electron의 dialog를 사용하여 파일 선택기 만들기

참고

dialog | Electron
계속 · Electron에서 파일과 폴더 선택 (저장도있어)

소개

이 기사에서는 Electron의 dialog를 사용하여 최소 구성의 파일 선택기를 만듭니다.
Electron을 만지기 시작하고 2초밖에 걸리지 않는 나에게 알기 쉬운 기사가 없었기 때문에 메모 쓰기 정도로 정리했습니다. 조금이라도 저와 같은 처지 사람의 도움이 되시면 다행입니다.
JavaScript의 "Hello Word"가 읽을 수있는 사람을 대상으로합니다.

필요한 것

Electron의 최소 구성 애플리케이션
이 기사에서는 Electron의 최소 구성의 애플리케이션을 덮어쓰는 형태로 앱을 만들어 갑니다. 이 사이트을 참조하여 최소 구성 응용 프로그램을 준비하십시오.

빈 스크립트
파일 이름은 DialogSample.js입니다. 이 파일에 앱의 파일 선택기 부분을 씁니다.

폴더 구성

Sample
├─node_modules // Electronをインストールした際に作られる
│ ├.bin
│    ・
│    ・
│    ・
├─DialogSample.js // 空のスクリプト
├─index.html
├─main.js
├─package.json
└─package-lock.json // Electronをインストールした際に作られる

앱 이미지

이번에는 아래 이미지와 같은 앱을 만듭니다. 버튼을 누르면 파일 선택기가 시작되고 파일을 선택하면 콘솔에 선택한 파일의 경로가 출력됩니다.

소스 코드

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dialog sample</title>
</head>

<body>
  <button id="open-file-button">open file</button>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="./DialogSample.js"></script>
</body>
</html>

DialogSample.js

const remote = require('electron').remote;
const Dialog = remote.dialog;

$(function(){
  $('#open-file-button').on('click', function(){
    Dialog.showOpenDialog(null, {
    }, (fileNames) => {
      console.log(fileNames);
    });
  });
});

출력 결과

덤 옵션에 대해

좀 더 커스터마이즈 된 파일 피커를 만들고 싶은 분에게 옵션이 준비되어 있습니다. 아래와 같이 작성할 수 있습니다. 자세한 것은 여기 에 쓰여져 있으므로 참고해 주세요.

Dialog.showOpenDialog(null, {
  // ここにオプションを書く
  title: 'title',
  defaultPath: 'C:\\ ',
  buttonLabel: 'buttonLabel',
  filters: [
    {name: 'HTML', extensions: ['html']},
    {name: 'JavaScript', extensions: ['js']},
    {name: 'All', extensions: ['*']}
  ],
  properties: ['openFile']
}

Reference

이 문제에 관하여(Electron의 dialog를 사용하여 파일 선택기 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hashishinwa/items/cf6c7fa939aa357ecb3b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다