electron-vue静默打印2019最新解决方案（含源码）

项目环境

node 10.15.3
yarn 1.15.2
win10
代码完成时间2019-4-18

废话不多说，先放源码

GitHub

https://github.com/951477037/electron-print

git clone https://github.com/951477037/electron-print.git

//安装依赖
yarn

//运行项目
yarn run dev

//打包项目
yarn run build

目录结构

目录结构

先在主进程 /src/main/index.js

//引入ipcMain
import {
  app,
  BrowserWindow,
  ipcMain
} from 'electron'

index.js代码

在createWindow方法里添加以下代码，获取打印机列表

  //在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件
  ipcMain.on('getPrinterList', (event) => {
    //在主线程中获取打印机列表
    const list = mainWindow.webContents.getPrinters();
    //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
    mainWindow.webContents.send('getPrinterList', list);
  });

index.js

接下来在LandingPage.vue中也就是渲染进程中添加一下代码

const ipcRenderer = require("electron").ipcRenderer;

//使用ipcRenderer与主进程通信，并获取返回值
ipcRenderer.send("getPrinterList");
//监听主线程获取到打印机列表后的回调
ipcRenderer.once("getPrinterList", (event, data) => {
//data就是打印机列表
console.log(data);
});

LandingPage.vue

输出结果如下

image

重点来了！！！
在static中新建一个print.html文件（如果你害怕打包后会找不到的话，我在最后会提供一个方法不知道你看得仔不仔细），如下图所示

目录结构

如果不在static中新建的话会报错（具体原因我明没有深入去研究）

报错

    
    
    
    
    
    



    

        
{{v}}
    

创建完成，回到LandingPage.vue中添加以下代码
注意两个参数

silent  是否静默打印
deviceName  打印机名字

把deviceName换成你自己的打印机名字

运行代码

打印

打包的方法！！！
打包前在package.json中修改

"win": {

​      "icon": "build/icons/icon.ico",

​      "extraResources": "./static/*.html"

​    },

打包后，electron-print\build\win-ia32-unpacked\resources中就会存在static

打包后目录

static中

打包后目录

2019-5-13
回复少年爱风华
写法应该是这样，好久没用了，你可以试试

image.png

如果觉得有用请点个赞，转发请注明来源，谢谢