在电子的 vue 组件中打印画布

Question

我用 vue.js 和电子框架创建了一个 SPA。 在 vue 组件中，我想打印一些标签，这些标签是从 vue liefecycle 安装状态下的数据库中获取数据。 该组件仅用于查看标签格式的数据，它是一个子组件。 标签由画布元素呈现。 一开始我尝试在vue的mounted函数中使用js-function window.print() ，但是网站看起来是空的。 画布元素不会被打印，即使我将其转换为 jpg 或 png 并将其附加到 DOM。 但有可能，我可以打印一些简单的文本。 现在我坚持使用webcontens.print()通过电子功能进行打印。 我必须在vue-life-cycle中调用它，但我没有找到与电子通信的方法。 我想，我必须引导当前的 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
})