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