electron-vue靜默打印2019最新解決方案（含源碼）

時間 2019-11-08

標籤 electron vue 靜默打印最新解決方案源碼简体版

原文原文鏈接

項目環境

node 10.15.3
yarn 1.15.2
win10
代碼完成時間2019-4-18css

廢話很少說，先放源碼

GitHubhtml

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

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

//安裝依賴
yarn

//運行項目
yarn run dev

//打包項目
yarn run build

目錄結構
node

先在主進程 /src/main/index.jsgit

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

在createWindow方法裏添加如下代碼，獲取打印機列表github

//在主線程下，經過ipcMain對象監聽渲染線程傳過來的getPrinterList事件
  ipcMain.on('getPrinterList', (event) => {
    //在主線程中獲取打印機列表
    const list = mainWindow.webContents.getPrinters();
    //經過webContents發送事件到渲染線程，同時將打印機列表也傳過去
    mainWindow.webContents.send('getPrinterList', list);
  });

接下來在LandingPage.vue中也就是渲染進程中添加一下代碼web

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

//使用ipcRenderer與主進程通訊，並獲取返回值
ipcRenderer.send("getPrinterList");
//監聽主線程獲取到打印機列表後的回調
ipcRenderer.once("getPrinterList", (event, data) => {
//data就是打印機列表
console.log(data);
});

輸出結果以下
json

重點來了！！！
在static中新建一個print.html文件（若是你懼怕打包後會找不到的話，我在最後會提供一個方法不知道你看得仔不仔細），以下圖所示

若是不在static中新建的話會報錯（具體緣由我明沒有深刻去研究）
app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <title>Document</title>
    <style>
        @page {
            margin: 0;
        }
        .a {
            padding-left: 100px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="a" v-for="v in arr">{{v}}</div>
    </div>
</body>
<script>
    //引入ipcRenderer對象
    const {
        ipcRenderer
    } = require('electron')
    new Vue({
        el: "#app",
        data: {
            arr: []
        },
        mounted() {
            ipcRenderer.on('ping', (e, arr) => { //接收響應
                console.log(e)
                console.log(arr)
                this.arr = arr;
                ipcRenderer.sendToHost('pong') //向webview所在頁面的進程傳達消息
            })
        },
        methods: {}
    })
</script>

</html>

建立完成，回到LandingPage.vue中添加如下代碼
注意兩個參數dom

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>

運行代碼

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

"win": {

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

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

    },

打包後，electron-printbuildwin-ia32-unpackedresources中就會存在static

static中

若是以爲有用請點個贊，轉發請註明來源，謝謝

相關標籤/搜索