печать холста в vue-компоненте в электроне

Question

Я создал SPA с vue.js и электронным фреймворком.В vue-компоненте я хочу напечатать некоторые метки, которые получают данные из базы данных в смонтированном состоянии vue liefecycle.Компонент используется только для просмотра данных в формате метки и является дочерним компонентом.Ярлыки визуализируются элементами canvas.Сначала я попытался использовать js-функцию window.print() в смонтированной функции vue, но сайт выглядит пустым.Элемент canvas не будет напечатан, даже если я преобразую его в jpg или png и добавлю его с помощью DOM.Но возможно, что я могу напечатать какой-нибудь простой текст.Теперь я продолжаю печатать с помощью электронных функций с webcontens.print().Я должен назвать это в жизненном цикле Vue, но я не нахожу способ общаться с электроном.Я думаю, я должен управлять текущим экземпляром BrowserWindow.

Answer 1

Вы можете общаться с электроном, используя систему 'ipc', предоставленную в пакете электронов:

В свой компонент vue импортируйте 'ipcRenderer' следующим образом:

import {ipcRenderer} from 'electron';

Затем сохраните данные холста в виде строки base64 для отправки их через систему 'ipc':

// store the base64 string in a variable
const payload = canvas.toDataURL("image/png");
//where 'canvas' is selected via 'document.getElementByID()' or any DOM method

Отправьте «полезную нагрузку» на электронную сторону приложения:

ipcRenderer.send('canvas:data', payload); //'canvas:data' is just an event name, it could be anything

Теперь на стороне приложения в электронном виде настройте прослушиватель событий на событие «canvas: data» для получения полезной нагрузки:

Итак, на вашей электронной стороне(обычно «index.js»), импортируйте «ipcMain» следующим образом:

import {ipcMain} from 'electron';

и настройте прослушиватель:

ipcMain.on('canvas:data', (event, payload)=>{
  console.log(payload); //whatever you want to do here
})