JS tutorial - printing stickers / labels using the electronjs desktop application

In this paper , We will discuss how to use Vue-ElectronJS Desktop applications print specific sizes （ such as 10" X 10"） Stickers for

We see the product information label on the product , With product and price information . Or there are many industries that are testing products , The test application creates a sticker based on its results , And stick the sticker on the tested product .

How these prints are generated and printed on stickers ？

We will see this in this article .

We are using with ElectronJS Of VueJS To build our application . because ElectronJS Enables us to create desktop applications , It also has built-in... For creating print statements and returning their results API.

Print plain text VS Print HTML Content

When you want to print plain text , You can give commands directly from the main window . however , When you want to print custom HTML Design content , You must create a new window , You will present HTML Content , Then issue a command to print content on this page .

In this paper , We will explore printing HTML The second choice of content .

By default ,ElectronJS Create a separate window , It is sufficient when you want to render application content , But when we want to print custom / Dynamic data , We must have another window to render the data .

Let's configure another window ：

In your main renderer file , Usually located in –src/main/index.js, You will notice that the main window is defined here , Let's define another window to render the print

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