Electron js webContents.print options not working (always prints on A4 page)

Question

I'm working on a cinema ticketing application and when I print ticket it always prints on A4 page. I need the ticket on the small page not on a full-size a4 page. I tried to fix this by using CSS but the results are always the same for page size.

HTML Template

data:text/html;charset=utf-8,

   
   
   Print Ticket
   


   
      
         
            
               
                  YABOUS TICKET
               
            
            
               
                  
                      EVENT
                        
 %event% 
                     
                  
                   
                     HALL
                     
 %hall% 
                  
                   TICKET NO.PRICE
                     
 %seatNo% %ticketPrice% 
                  
                  
                      FLOOR
                        
 %floor% 
                     
                      SEAT
                        
 %seat% 
                     
                      ROW
                        
 %row% 
                     
                  
                  
                     GATE CLOSES 30 MINUTES BEFORE EVENT START
                  
               
               
                  
                     
                        EVENT TIME
                        

                         %time% %date% 
                     
                  
                    
               
            
         
      
      
         
         WWW.YABOUS.ORG
         
         
         YABOUS

JS code

    const options = {
        silent: false,
        marginType: 1,
        landscape: true,
        pagesPerSheet: 1,
        collate: true,
        copies: 1,
        printBackground: true,
        pageSize: {
          height: 454,
          width: 471
        }
    }

    let win2 = new BrowserWindow({
        height: 454,
        width: 471,
        icon: __dirname + `/dist/storyteller/assets/favicon.ico`
    });

    win2.setMenu(null);

    win2.loadURL(page);
    // win2.webContents.reload();
    // let win = BrowserWindow.getAllWindows()[0]; 

    win2.webContents.on('did-finish-load', () => {
        win2.webContents.print(options, (success, failureReason) => {
            if (!success) console.log(failureReason);

            console.log('Print Initiated');
        });
    })

Print Result

Print page result

I need to remove white spaces around the ticket and make the ticket fit the page.

user_6786876 · Answer

According to Electron's documentation on webContents.print (), the pageSize object must only specify a height property (although it is declared to provide both width and height in a Size object). Since the docs are ambiguous about the width, I guess it will be calculated to match one of the listed supported page formats if the operating system does not report it to Electron as "supported". Thus, since your height does not match any of the supported formats (of your operating system), Electron defaults to A4.

One could argue that the reason for this is that the most consumer printers use one of the listed paper size formats anyway and that mishaps can be prevented by not allowing any other paper format. Also, Chrome doesn't allow to set an arbitrary page height/width via its UI, which probably is also the reason why Electron doesn't implement this (Electron is based on Chromium, the development version of Chrome).

If you have to keep the page size at your special format, the webContents.printToPDF () method is probably the next best thing as it allows to specify arbitrary width and height measurements. The linked documentation page gives an example of how to use this function to write to a file. You could then invoke an external PDF reader and print the file from there, but this is content for a new question.

In case you do not have a specialised printer capable of printing on 471mm x 454mm paper, I suggest to stick with A4. If you need the page in PDF format, simply refer to the documentation linked above. And since it seems you're writing some sort of ticketing software: In case you prepare PDF files for customers, also stick with A4 and let the customers fold the paper to the required format. That's how most online-bought tickets in Europe work.

Electron js webContents.print options not working (always prints on A4 page)

1 Answers