electron main.js

const {app, BrowserWindow, ipcMain} = require('electron')


function createWindow(){
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false,
            webviewTag: true // 这个必须设置，不然webview无法使用
        }
    })

    win.webContents.openDevTools()

    win.loadFile('index.html')
    
    // 监听获取打印机列表
    ipcMain.on('getPrinterList', event => {
        win.webContents.getPrintersAsync().then(res => {
            // 告知列表
            win.webContents.send('getPrinterList', res)
        })
    })

}

首页 index.html

我的提示

注意webview的nodeintegration和webpreferences="contextIsolation=no"属性，通过这两个属性让打印页面支持require

<div id="app">
    <h3>打印机列表(默认打印机：{{printerName}})</h3>
    <ul>
        <li v-for="item in printerSelection" :key="item.name">
            <input type="radio" v-model="printerName" :value="item.name"> {{item.name}}
        </li>
    </ul>
    <webview id="printWebview" ref="printWebview" webpreferences="contextIsolation=no" src="./print.html"
        nodeintegration style="width:100px;height:650px;display:none"></webview>
    <button @click="onPrint">打印</button>
</div>
<script>
    const { ipcRenderer } = require('electron')
    new Vue({
        el: '#app',
        data() {
            return {
                printerSelection: [],
                printerName: ''
            }
        },
        created() {
            // 打印机
            // 渲染线程主动发送getPrinterList事件到主线程请求打印机列表
            ipcRenderer.send('getPrinterList')
            // 监听主线程获取到打印机列表后的回调
            ipcRenderer.once('getPrinterList', (event, data) => {
                // data就是打印机列表
                for (var i = 0; i < data.length; i++) {
                    this.printerSelection.push(data[i])
                    // 设置默认打印机
                    if (data[i].isDefault) {
                        this.printerName = data[i].name
                    }
                }
            })
        },
        mounted() {
            const webview = this.$refs.printWebview;
            // 监听ipc消息
            webview.addEventListener("ipc-message", (event) => {
                // 如果是打印页面发送的打印消息，则打印
                if (event.channel === "webview-print-do") {
                    webview.print({
                        silent: true,//静默打印
                        printBackground: true,
                        deviceName: this.printerName, //打印机名称
                    }).then((res) => {
                        console.log(res);
                    }).catch((err) => {
                        console.log(err);
                    });
                }
            });
            // 5秒后打印一次
            setTimout(() => {
                this.onPrint()
            }, 5000)
        },
        methods: {
            onPrint() {
                const webview = this.$refs.printWebview;
                // 告知打印页面渲染打印信息
                webview.send("webview-print-render", {name:'打印测试'})
            }
        }
    })
</script>

打印页面 print.html

<div>
    打印测试，你好：<span id="name"></span>
</div>
<script>
    const { ipcRenderer } = require('electron')
    // 监听渲染事件
    ipcRenderer.on('webview-print-render', (event, data) => {
        document.getElementById('name').innerText = data.name
        // 告知渲染完成，可以打印
        ipcRenderer.sendToHost('webview-print-do')
    })
</script>