zl程序教程

您现在的位置是:首页 >  后端

当前栏目

JS教程之使用 ElectronJS 桌面应用程序打印贴纸/标签

JS教程应用程序 标签 打印 桌面 使用
2023-09-11 14:18:47 时间

在本文中,我们将讨论如何使用 Vue-ElectronJS 桌面应用程序打印特定尺寸(比如 10" X 10")的贴纸

我们看到产品信息标签贴在产品上,并附有产品和价格信息。或者有许多行业正在对产品进行测试,测试应用程序会根据其结果创建一个贴纸,并将该贴纸贴在被测产品上。

这些印刷品是如何生成并打印在贴纸上的?

我们将在本文中看到这一点。

我们正在使用带有 ElectronJS 的 VueJS 来构建我们的应用程序。由于 ElectronJS 使我们能够创建桌面应用程序,它还具有用于创建打印语句并返回其结果的内置 API。

打印普通文本 VS 打印 HTML 内容

当你想打印普通文本时,你可以直接从主窗口给出命令。但是,当您想要打印自定义 HTML 设计的内容时,您必须创建一个新窗口,您将在其中呈现 HTML 内容,然后发出命令以在此页面上打印内容。

在本文中,我们将探讨打印 HTML 内容的第二种选择。

默认情况下,ElectronJS 创建一个单独的窗口,当您想要呈现应用程序内容时它就足够了,但是当我们想要打印自定义/动态数据时,我们必须有另一个窗口来呈现这些数据。

让我们配置另一个窗口:

在你的主渲染器文件中,通常位于–src/main/index.js,你会注意到这里定义了主窗口,让我们定义另一个窗口来渲染打印内容

const printerWindow = new BrowserWindow({
  show: false,
  webPreferences: {
    webSecurity: false,
    nodeIntegratio