electron-vue-print

KO | EN

gitlite — search

#javascript #python #react #go #golang #android #docker #java #cli #kubernetes #security #mcp #ios #open-source

electron-vue-print

(★ 8)

基于electron-vue脚手架开发的支持打印和扫描功能的项目

electron-vue-print 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

项目环境

node 最新的稳定版

```
//yarn 基本安装和使用
npm install -g yarn
```
```
//安装依赖  注意不要用淘宝镜像下载依赖，最后打包会报错
npm install  或者 yarn  
```

```
//运行项目
npm run dev 或者 yarn run dev
```

```
//打包项目
npm run build 或者  yarn run build
//打包报错常见问题：
https://blog.csdn.net/gaoxuaiguoyi/article/details/80708815
https://www.cnblogs.com/mingjing/p/9638420.html
```

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

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

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

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

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

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

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

```
<!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中添加以下代码
注意两个参数

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

```

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

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

```

打包前在package.json中修改

```
"win": {

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

"extraResources": "./static"

},

```

electron-vue-print

electron-vue-print 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

electron-vue-print

electron-vue-print 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README