在vue中打印画布-电子组件
我创建了一个带有vue.js和电子骨架的SPA。在一个vue组件中，我想打印一些标签，这些标签从处于vue生命周期挂载状态的数据库中获取数据。该组件仅用于查看标签格式的数据，它是一个子组件。标签由canvas-element呈现。首先，我尝试在vue的window.print()函数中使用js-function函数，但是站点看起来是空的。画布元素不会被打印，即使我将其转换为jpg或png并附加了DOM。但是有可能，我可以打印一些简单的文本。现在，我坚持使用webcontens.print()通过电子功能进行打印。我不得不在vue生命周期中调用它，但我找不到一种与电子通信的方法。我想，我必须控制当前的BrowserWindow实例。
回答 1
Stack Overflow用户
发布于 2019-09-01 19:08:43
您可以使用电子软件包中提供的'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
})https://stackoverflow.com/questions/54841749
复制相似问题
腾讯云开发者
