在电子中的Vue分量中打印画布

时间:2019-02-23 12:44:53

标签: javascript vue.js canvas electron

我用vue.js和电子框架创建了一个SPA。在vue组件中,我要打印一些标签,这些标签正在以vue liefecycle的挂载状态从数据库中获取数据。该组件仅用于查看标签格式的数据,它是一个子组件。标签由画布元素渲染。 最初,我尝试在vue的已挂载函数中使用js函数window.print(),但该站点看上去空着。即使我将canvas元素转换为jpg或png并附加了DOM,也不会打印出来。但是有可能我可以打印一些简单的文本。 现在,我继续使用webcontens.print()通过电子功能进行打印。我必须在生命周期中称呼它,但是我没有找到交流的方法  与电子。 我在想,我必须控制当前的BrowserWindow实例。

1 个答案:

答案 0 :(得分: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
})