Основной процесс

Процесс Main - это обычно main.js, который мы определяем в нашем package.json как точку входа для нашего электронного приложения. Основным процессом является контроллер приложения с момента его открытия до закрытия. Он также отвечает за создание меню приложений и процесса рендеринга, когда это необходимо и считается подходящим.

В Chrome это называется процессом браузера, но, чтобы избежать путаницы с процессом рендеринга, в Electron он переименован в основной процесс.

Процесс рендеринга

Как мы знаем, электрон ничего не делает, кроме как предоставляет оболочку вокруг веб-приложения, которое запускается, как и любое другое приложение. Таким образом, процесс рендеринга - это то окно браузера, которое электрон открывает в своей среде для рендеринга вашей веб-страницы.

Одно из ключевых различий между запуском веб-страниц в среде браузера и электроном заключается в том, что электронные пользователи имеют возможность взаимодействовать с операционной системой на более низком уровне, который ограничен для браузеров.

IpcRenderer

ipcRenderer - это генератор событий, используемый процессом Renderer Process (изнутри веб-страниц) для связи с основным процессом. Он может отправлять синхронные и асинхронные сообщения основному процессу и прослушивать сообщения от основного процесса.

Мы будем использовать метод send ipcRenderer для отправки сообщения от процесса рендеринга основному процессу.

IpcMain

ipcMain - это генератор событий, который используется в основном процессе для прослушивания синхронизирующих / асинхронных сообщений от процесса рендеринга.

Мы будем использовать метод ipcMain.on для прослушивания сообщения, отправленного с помощью ipcRenderer.

Шаги по загрузке файла с URL

Предположим, у вас есть URL-адрес файла, который вы хотите загрузить, но вы просто не можете использовать тег привязки волей-неволей для междоменных запросов (вы спрашиваете, почему? Потому что современные браузеры разрешают загрузку только из того же домена).

Тогда что еще мы можем здесь сделать? Помните, когда мы говорили, что с электроном мы можем осуществлять низкоуровневые взаимодействия с ос. Это будет означать, что если мы не можем выполнять междоменные запросы из нашего процесса рендеринга, мы можем попросить электрон сделать это за нас. А поскольку электрон находится в узловой среде, это должно быть для него легкой задачей.

Итак, чтобы разбить его на шаги, у нас будет следующее:

1. Из обработчика onClick отправьте сообщение основному процессу (состоящему из URL-адреса файла) с помощью ipcRenderer.send() метода.

2. Добавьте прослушиватель событий в основной процесс для прослушивания канала, используемого ipcRenderer для отправки сообщения о загрузке.

3. Внутри прослушивателя событий используйте встроенный механизм электрона для загрузки файлов с URL. Вы можете использовать webContents.downloadURL() или session.downloadURL() для загрузки файла.

Я буду использовать webContents.downloadURL(), но обязательно использую оба, чтобы выяснить, в чем разница между ними.

проверьте `webContents.downloadURL ()` для получения дополнительной информации из электронных документов.

4. Шаг 3 откроет диалоговое окно «Сохранить как» в собственном пользовательском интерфейсе, после чего вы сможете сохранить файл в желаемом месте.

Примечание. Диалоговое окно «Сохранить как», открытое webContents.downloadURL(), имеет фиксированные свойства, такие как место загрузки по умолчанию - это папка загрузки вашей системы, имя файла будет предварительно заполнено из URL-адреса.

Настраиваемый диалог сохранения как и отслеживание прогресса

В этом разделе мы собираемся использовать electron-dl библиотеку для загрузки наших файлов и electron.dialog для отображения диалогового окна saveAs перед загрузкой файла.

Для установки electron-dl запустите

Импортируйте метод download из electron-dl

Теперь давайте изменим приведенные выше 4 шага, чтобы добавить индивидуальную настройку.

1. Добавьте настраиваемое имя файла и целевой каталог по умолчанию для всех приложений для загрузок. (Вы можете поддерживать каталог для загрузок всего приложения, используя меню конфигурации в пользовательском интерфейсе). Для пояснения я буду считать это documents вместо downloads.

Теперь мы отправим пользовательское имя файла и каталог в основной процесс в качестве полезной нагрузки от ipcRenderer.

В основном процессе мы обновим наш прослушиватель событий, чтобы добиться следующих

2. Мы проверим свойства объекта, полученные основным процессом, и на их основе покажем диалоговое окно «Сохранить как».

CustomURL будет неопределенным, если диалог был отменен, в противном случае он будет иметь место назначения и имя файла, установленные пользователем. Структура настраиваемого URL-адреса будет такой: "<directory-path>/<filename>" Сохранение файла с помощью метода загрузки.

Этого достаточно, чтобы загрузить файл, но я предполагаю, что вы хотите, чтобы пользователь вашего приложения знал о ходе загрузки. Для этого мы можем добавить обратные вызовы для определенных событий, которые обрабатываются electron-dl.

К концу шага 4 ваш обработчик событий будет выглядеть так

5. Наконец, вы должны прослушать обновления в процессе рендеринга и внести необходимые изменения. Для этого мы будем прослушивать каналы download-progress и download-complete с помощью ipcRenderer.

При этом у вас есть ход выполнения файла, когда он загружается, и downloadedItem, когда файл загружен. Теперь вам решать, как вы хотите это представить.

Резюме

У вас есть различные способы загрузки файла по URL-адресам, и действительно вам решать, какой контроль вы хотите иметь над каждым аспектом своего приложения. В этой статье был рассмотрен минимум этих библиотек и классов фабрики электронов. Надеюсь, вы ознакомитесь с официальной документацией этих библиотек и узнаете, какие еще замечательные функции они предоставляют.

Есть вероятность, что вы можете столкнуться с трудностями при доступе к ipcRenderer внутри ваших компонентов пользовательского интерфейса с более поздними версиями Electron или некоторыми фреймворками пользовательского интерфейса, такими как React / Angular. Следите за моей предстоящей статьей, в которой я расскажу о различных методах, которые вы можете использовать для доступа к ipcRenderer и другим модулям узлов внутри вашего процесса рендеринга.