项目环境

node 10.15.3

yarn 1.15.2

win10

代码完成时间2019-4-18

废话不多说,先放源码

GitHub

951477037/electron-print​github.com
f36d837cbce552252a962f804fcea79e.png
git clone 951477037/electron-print
//安装依赖
//运行项目
yarn run dev
//打包项目
yarn run build

目录结构

66d75cd297827168f1a4f0173ee4ed8f.png
目录结构
目录结构

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

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

b2f2d790251d5014d0fa306614aa1d49.png
index.js代码

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

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

042f9df8182ca5ca0ee85bdae1429507.png
index.js

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

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

060b25decd8e3780691a8c283a9a413e.png
LandingPage.vue

输出结果如下

2e33fca2804a10ad757b93bb1e48580a.png

重点来了!!!

在static中新建一个print.html文件(如果你害怕打包后会找不到的话,我在最后会提供一个方法不知道你看得仔不仔细),如下图所示

191d49c8ec773529aad9e291b23bff5c.png
目录结构

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

9174f0f0c9067b6b4e729db97dcf060a.png
报错
<!

创建完成,回到LandingPage.vue中添加以下代码

注意两个参数

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

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

<template>
  <div>
    <webview src="../../../static/print.html" nodeintegration></webview>
  </div>
</template>

<script>
const ipcRenderer = require("electron").ipcRenderer;
export default {
  name: "landing-page",
  components: {},
  data() {
    return {
      print0: "",
      print1: ""
    };
  },
  mounted() {
    this.getPrinterList(); //首先先获取
    this. print();
  },
  methods: {
    print() {
      const webview = document.querySelector("webview");
      console.log(webview);
      webview.addEventListener("dom-ready", () => {
        console.log("dom-ready");
        //dom-ready---webview加载完成
        webview.openDevTools(); //这个方法可以打开print.html的控制台
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14];
        //在send时将arr传递过去
        webview.send("ping", arr); //向webview嵌套的页面响应事件
      });
      webview.addEventListener("ipc-message", event => {
        console.log(event.channel); // Prints "pong" 在此监听事件中接收webview嵌套页面所响应的事件
        if (event.channel == "pong") {
          console.log("通信成功");
          webview.print(
            {
              //是否是静默打印,true为静默打印,false会弹出打印设置框
              silent: true,
              printBackground: true,
              //打印机的名称,this.print1为在getPrinterList()方法中获取到的打印机名字。
              //注意在demo中这是我打印机的设备,在使用本demo时,先去getPrinterList()中找到你使用的打印机
              deviceName: this.print1
            },
            data => {
              //这个回调是打印后的回调事件,data为true就是打印成功,为false就打印失败
              console.log("webview success", data);
            }
          );
        }
      });
    },
    getPrinterList() {
      ipcRenderer.send("getPrinterList");
      //监听主线程获取到打印机列表后的回调
      ipcRenderer.once("getPrinterList", (event, data) => {
        //data就是打印机列表
        this.print0 = data[3].name;
        this.print1 = data[5].name;
        console.log(data[3].name);
        console.log(data[5].name);
      });
    }
  }
};
</script>

<style>
</style>

运行代码

1fa38066fe01d02a0bf78b251762a920.png
[打印

打包的方法!!!

打包前在package.json中修改

"win": {

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

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

​    },

打包后,electron-printbuildwin-ia32-unpackedresources中就会存在static

607559699d764f62cc8ebed77f8704dd.png
打包后目录

static中

e87cd09279aea15f90d010eedb04cd71.png
打包后目录

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

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐