How to print html/text file using electron webContents.print([options], [callback])?

Question

---

Electron Version : 2.0.7

Operating System : Ubuntu 16.04

Node Version : 8.11.1

---

electron.js

let win = new BrowserWindow({width: 302, height: 793,show:false});
win.once('ready-to-show', () => win.hide());
    fs.writeFile(path.join(__dirname,'/print.txt'), "Test Print From the app",function(){
        win.loadURL(`file://${path.join(__dirname,'/print.txt')}`);
        win.webContents.on('did-finish-load', () => {
            let printersInfo = win.webContents.getPrinters();
            let printer = printersInfo.filter(printer => printer.isDefault === true)[0];
            win.webContents.print({silent: true, printBackground: true, deviceName : printer.name},() => {
                win = null;
            });
        });
    })

win.webContents.print(silent: true, printBackground: true, deviceName : "POS-1") yields unusual data like the below image:

win.webContents.print(silent: false, printBackground: true, deviceName : "POS-1") yields unusual data and overlapping the file text like the below image:

i also tried for html file but it also yields the same output.

if i write it with silent : true and without the deviceName then it's yields nothing..

let win = new BrowserWindow({show:false});
win.once('ready-to-show', () => win.hide());
win.loadURL(`file://${path.join(__dirname,'/hello.html')}`);
win.webContents.on('did-finish-load', () => {
    win.webContents.print({silent: true});
});

if i write it with the deviceName then it's yields the same output which i have shown in the picture above.

let win = new BrowserWindow({show:false});
win.once('ready-to-show', () => win.hide());
win.loadURL(`file://${path.join(__dirname,'/hello.html')}`);
win.webContents.on('did-finish-load', () => {
    let printersInfo = win.webContents.getPrinters();
    let printer = printersInfo.filter(printer => printer.isDefault === true)[0];
    win.webContents.print({silent: true, deviceName : printer.name});
});

How to reproduce

silent = true

win.webContents.print({
  silent: true,
  printBackground: false,
  deviceName: 'POS-1'
});

silent = false

win.webContents.print({
  silent: false,
  printBackground: false,
  deviceName: 'POS-1'
});

Answer 1

Even in electron 11.0, I faced this issue while printing HTML template. And found the solution. The problem is margin of the page. I added margin-top for my header content and now its printing correctly without unusual data.

Main.js

ipcMain.on('print', (event, arg) => {
    let win = new BrowserWindow({ width: 302, height: 793, show: false });
    win.once('ready-to-show', () => win.hide());
    fs.writeFile(path.join(__dirname, '/printme.html'), arg, function () {
        win.loadURL(`file://${path.join(__dirname, '/printme.html')}`);
        win.webContents.on('did-finish-load', () => {
        
        // Finding Default Printer name
            let printersInfo = win.webContents.getPrinters();
            let printer = printersInfo.filter(printer => printer.isDefault === true)[0];

            const options = {
                silent: true,
                deviceName: printer.name,
                pageSize: { height: 301000, width: 50000 }
            }

            win.webContents.print(options, () => {
                win = null;
            });
        });
    })

    event.returnValue = true;
});

printme.html

<style type="text/css">   
    #content {
        margin-top: 15px;
    }
</style>
<div id="page-wrap">
    <div id="content">
        my header content
    </div>
</div>