Основной процесс
Процесс 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 и другим модулям узлов внутри вашего процесса рендеринга.