├── dist
    ├── web
    │   └── .gitkeep
    └── electron
    │   └── .gitkeep
├── static
    ├── .gitkeep
    └── print.html
├── src
    ├── renderer
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── logo.png
    │   ├── App.vue
    │   ├── router
    │   │   └── index.js
    │   ├── store
    │   │   ├── index.js
    │   │   └── modules
    │   │   │   ├── index.js
    │   │   │   └── Counter.js
    │   ├── main.js
    │   └── components
    │   │   ├── LandingPage
    │   │       └── SystemInformation.vue
    │   │   └── LandingPage.vue
    ├── main
    │   ├── index.dev.js
    │   └── index.js
    └── index.ejs
├── .gitignore
├── appveyor.yml
├── .babelrc
├── .travis.yml
├── .electron-vue
    ├── dev-client.js
    ├── webpack.main.config.js
    ├── build.js
    ├── webpack.web.config.js
    ├── webpack.renderer.config.js
    └── dev-runner.js
├── package.json
└── README.md


/dist/web/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/dist/electron/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/renderer/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/renderer/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicCraver/electron-print/HEAD/src/renderer/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | dist/electron/*
 3 | dist/web/*
 4 | build/*
 5 | !build/icons
 6 | node_modules/
 7 | npm-debug.log
 8 | npm-debug.log.*
 9 | thumbs.db
10 | !.gitkeep
11 | 


--------------------------------------------------------------------------------
/src/renderer/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'electron-print'
10 |   }
11 | </script>
12 | 
13 | <style>
14 |   /* CSS */
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/renderer/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export default new Router({
 7 |   routes: [
 8 |     {
 9 |       path: '/',
10 |       name: 'landing-page',
11 |       component: require('@/components/LandingPage').default
12 |     },
13 |     {
14 |       path: '*',
15 |       redirect: '/'
16 |     }
17 |   ]
18 | })
19 | 


--------------------------------------------------------------------------------
/src/renderer/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | import { createPersistedState, createSharedMutations } from 'vuex-electron'
 5 | 
 6 | import modules from './modules'
 7 | 
 8 | Vue.use(Vuex)
 9 | 
10 | export default new Vuex.Store({
11 |   modules,
12 |   plugins: [
13 |     createPersistedState(),
14 |     createSharedMutations()
15 |   ],
16 |   strict: process.env.NODE_ENV !== 'production'
17 | })
18 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * The file enables `@/store/index.js` to import all vuex modules
 3 |  * in a one-shot manner. There should not be any reason to edit this file.
 4 |  */
 5 | 
 6 | const files = require.context('.', false, /\.js$/)
 7 | const modules = {}
 8 | 
 9 | files.keys().forEach(key => {
10 |   if (key === './index.js') return
11 |   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
12 | })
13 | 
14 | export default modules
15 | 


--------------------------------------------------------------------------------
/src/renderer/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import axios from 'axios'
 3 | 
 4 | import App from './App'
 5 | import router from './router'
 6 | import store from './store'
 7 | 
 8 | if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 9 | Vue.http = Vue.prototype.$http = axios
10 | Vue.config.productionTip = false
11 | 
12 | /* eslint-disable no-new */
13 | new Vue({
14 |   components: { App },
15 |   router,
16 |   store,
17 |   template: '<App/>'
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Counter.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   main: 0
 3 | }
 4 | 
 5 | const mutations = {
 6 |   DECREMENT_MAIN_COUNTER (state) {
 7 |     state.main--
 8 |   },
 9 |   INCREMENT_MAIN_COUNTER (state) {
10 |     state.main++
11 |   }
12 | }
13 | 
14 | const actions = {
15 |   someAsyncTask ({ commit }) {
16 |     // do something async
17 |     commit('INCREMENT_MAIN_COUNTER')
18 |   }
19 | }
20 | 
21 | export default {
22 |   state,
23 |   mutations,
24 |   actions
25 | }
26 | 


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | version: 0.1.{build}
 2 | 
 3 | branches:
 4 |   only:
 5 |     - master
 6 | 
 7 | image: Visual Studio 2017
 8 | platform:
 9 |   - x64
10 | 
11 | cache:
12 |   - node_modules
13 |   - '%APPDATA%\npm-cache'
14 |   - '%USERPROFILE%\.electron'
15 |   - '%USERPROFILE%\AppData\Local\Yarn\cache'
16 | 
17 | init:
18 |   - git config --global core.autocrlf input
19 | 
20 | install:
21 |   - ps: Install-Product node 8 x64
22 |   - git reset --hard HEAD
23 |   - yarn
24 |   - node --version
25 | 
26 | build_script:
27 |   - yarn build
28 | 
29 | test: off
30 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "comments": false,
 3 |   "env": {
 4 |     "main": {
 5 |       "presets": [
 6 |         ["env", {
 7 |           "targets": { "node": 7 }
 8 |         }],
 9 |         "stage-0"
10 |       ]
11 |     },
12 |     "renderer": {
13 |       "presets": [
14 |         ["env", {
15 |           "modules": false
16 |         }],
17 |         "stage-0"
18 |       ]
19 |     },
20 |     "web": {
21 |       "presets": [
22 |         ["env", {
23 |           "modules": false
24 |         }],
25 |         "stage-0"
26 |       ]
27 |     }
28 |   },
29 |   "plugins": ["transform-runtime"]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/main/index.dev.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file is used specifically and only for development. It installs
 3 |  * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 4 |  *  modify this file, but it can be used to extend your development
 5 |  *  environment.
 6 |  */
 7 | 
 8 | /* eslint-disable */
 9 | 
10 | // Install `electron-debug` with `devtron`
11 | require('electron-debug')({ showDevTools: true })
12 | 
13 | // Install `vue-devtools`
14 | require('electron').app.on('ready', () => {
15 |   let installExtension = require('electron-devtools-installer')
16 |   installExtension.default(installExtension.VUEJS_DEVTOOLS)
17 |     .then(() => {})
18 |     .catch(err => {
19 |       console.log('Unable to install `vue-devtools`: \n', err)
20 |     })
21 | })
22 | 
23 | // Require `main` process to boot app
24 | require('./index')


--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>electron-print</title>
 6 |     <% if (htmlWebpackPlugin.options.nodeModules) { %>
 7 |       <!-- Add `node_modules/` to global paths so `require` works properly in development -->
 8 |       <script>
 9 |         require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
10 |       </script>
11 |     <% } %>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <!-- Set `__static` path to static files in production -->
16 |     <% if (!process.browser) { %>
17 |       <script>
18 |         if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
19 |       </script>
20 |     <% } %>
21 | 
22 |     <!-- webpack builds are automatically injected -->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | osx_image: xcode8.3
 2 | sudo: required
 3 | dist: trusty
 4 | language: c
 5 | matrix:
 6 |   include:
 7 |   - os: osx
 8 |   - os: linux
 9 |     env: CC=clang CXX=clang++ npm_config_clang=1
10 |     compiler: clang
11 | cache:
12 |   directories:
13 |   - node_modules
14 |   - "$HOME/.electron"
15 |   - "$HOME/.cache"
16 | addons:
17 |   apt:
18 |     packages:
19 |     - libgnome-keyring-dev
20 |     - icnsutils
21 | before_install:
22 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
23 |   "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
24 |   | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
25 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
26 | install:
27 | - nvm install 7
28 | - curl -o- -L https://yarnpkg.com/install.sh | bash
29 | - source ~/.bashrc
30 | - npm install -g xvfb-maybe
31 | - yarn
32 | script:
33 | - yarn run build
34 | branches:
35 |   only:
36 |   - master
37 | 


--------------------------------------------------------------------------------
/static/print.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 8 |     <title>Document</title>
 9 |     <style>
10 |         @page {
11 |             margin: 0;
12 |         }
13 |         .a {
14 |             padding-left: 100px;
15 |         }
16 |     </style>
17 | </head>
18 | 
19 | <body>
20 |     <div id='app'>
21 |         <div class="a" v-for="v in arr">{{v}}</div>
22 |     </div>
23 | </body>
24 | <script>
25 |     //引入ipcRenderer对象
26 |     const {
27 |         ipcRenderer
28 |     } = require('electron')
29 |     new Vue({
30 |         el: "#app",
31 |         data: {
32 |             arr: []
33 |         },
34 |         mounted() {
35 |             ipcRenderer.on('ping', (e, arr) => { //接收响应
36 |                 console.log(e)
37 |                 console.log(arr)
38 |                 this.arr = arr;
39 |                 ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息
40 |             })
41 |         },
42 |         methods: {}
43 |     })
44 | </script>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/.electron-vue/dev-client.js:
--------------------------------------------------------------------------------
 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 2 | 
 3 | hotClient.subscribe(event => {
 4 |   /**
 5 |    * Reload browser when HTMLWebpackPlugin emits a new index.html
 6 |    *
 7 |    * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
 8 |    * https://github.com/SimulatedGREG/electron-vue/issues/437
 9 |    * https://github.com/jantimon/html-webpack-plugin/issues/680
10 |    */
11 |   // if (event.action === 'reload') {
12 |   //   window.location.reload()
13 |   // }
14 | 
15 |   /**
16 |    * Notify `mainWindow` when `main` process is compiling,
17 |    * giving notice for an expected reload of the `electron` process
18 |    */
19 |   if (event.action === 'compiling') {
20 |     document.body.innerHTML += `
21 |       <style>
22 |         #dev-client {
23 |           background: #4fc08d;
24 |           border-radius: 4px;
25 |           bottom: 20px;
26 |           box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
27 |           color: #fff;
28 |           font-family: 'Source Sans Pro', sans-serif;
29 |           left: 20px;
30 |           padding: 8px 12px;
31 |           position: absolute;
32 |         }
33 |       </style>
34 | 
35 |       <div id="dev-client">
36 |         Compiling Main Process...
37 |       </div>
38 |     `
39 |   }
40 | })
41 | 


--------------------------------------------------------------------------------
/.electron-vue/webpack.main.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | process.env.BABEL_ENV = 'main'
 4 | 
 5 | const path = require('path')
 6 | const { dependencies } = require('../package.json')
 7 | const webpack = require('webpack')
 8 | 
 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
10 | 
11 | let mainConfig = {
12 |   entry: {
13 |     main: path.join(__dirname, '../src/main/index.js')
14 |   },
15 |   externals: [
16 |     ...Object.keys(dependencies || {})
17 |   ],
18 |   module: {
19 |     rules: [
20 |       {
21 |         test: /\.js$/,
22 |         use: 'babel-loader',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.node$/,
27 |         use: 'node-loader'
28 |       }
29 |     ]
30 |   },
31 |   node: {
32 |     __dirname: process.env.NODE_ENV !== 'production',
33 |     __filename: process.env.NODE_ENV !== 'production'
34 |   },
35 |   output: {
36 |     filename: '[name].js',
37 |     libraryTarget: 'commonjs2',
38 |     path: path.join(__dirname, '../dist/electron')
39 |   },
40 |   plugins: [
41 |     new webpack.NoEmitOnErrorsPlugin()
42 |   ],
43 |   resolve: {
44 |     extensions: ['.js', '.json', '.node']
45 |   },
46 |   target: 'electron-main'
47 | }
48 | 
49 | /**
50 |  * Adjust mainConfig for development settings
51 |  */
52 | if (process.env.NODE_ENV !== 'production') {
53 |   mainConfig.plugins.push(
54 |     new webpack.DefinePlugin({
55 |       '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
56 |     })
57 |   )
58 | }
59 | 
60 | /**
61 |  * Adjust mainConfig for production settings
62 |  */
63 | if (process.env.NODE_ENV === 'production') {
64 |   mainConfig.plugins.push(
65 |     new BabiliWebpackPlugin(),
66 |     new webpack.DefinePlugin({
67 |       'process.env.NODE_ENV': '"production"'
68 |     })
69 |   )
70 | }
71 | 
72 | module.exports = mainConfig
73 | 


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage/SystemInformation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="title">Information</div>
 4 |     <div class="items">
 5 |       <div class="item">
 6 |         <div class="name">Path:</div>
 7 |         <div class="value">{{ path }}</div>
 8 |       </div>
 9 |       <div class="item">
10 |         <div class="name">Route Name:</div>
11 |         <div class="value">{{ name }}</div>
12 |       </div>
13 |       <div class="item">
14 |         <div class="name">Vue.js:</div>
15 |         <div class="value">{{ vue }}</div>
16 |       </div>
17 |       <div class="item">
18 |         <div class="name">Electron:</div>
19 |         <div class="value">{{ electron }}</div>
20 |       </div>
21 |       <div class="item">
22 |         <div class="name">Node:</div>
23 |         <div class="value">{{ node }}</div>
24 |       </div>
25 |       <div class="item">
26 |         <div class="name">Platform:</div>
27 |         <div class="value">{{ platform }}</div>
28 |       </div>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 |   export default {
35 |     data () {
36 |       return {
37 |         electron: process.versions.electron,
38 |         name: this.$route.name,
39 |         node: process.versions.node,
40 |         path: this.$route.path,
41 |         platform: require('os').platform(),
42 |         vue: require('vue/package.json').version
43 |       }
44 |     }
45 |   }
46 | </script>
47 | 
48 | <style scoped>
49 |   .title {
50 |     color: #888;
51 |     font-size: 18px;
52 |     font-weight: initial;
53 |     letter-spacing: .25px;
54 |     margin-top: 10px;
55 |   }
56 | 
57 |   .items { margin-top: 8px; }
58 | 
59 |   .item {
60 |     display: flex;
61 |     margin-bottom: 6px;
62 |   }
63 | 
64 |   .item .name {
65 |     color: #6a6a6a;
66 |     margin-right: 6px;
67 |   }
68 | 
69 |   .item .value {
70 |     color: #35495e;
71 |     font-weight: bold;
72 |   }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/main/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   app,
 3 |   BrowserWindow,
 4 |   ipcMain
 5 | } from 'electron'
 6 | 
 7 | /**
 8 |  * Set `__static` path to static files in production
 9 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
10 |  */
11 | if (process.env.NODE_ENV !== 'development') {
12 |   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
13 | }
14 | 
15 | let mainWindow
16 | const winURL = process.env.NODE_ENV === 'development' ?
17 |   `http://localhost:9080` :
18 |   `file://${__dirname}/index.html`
19 | 
20 | function createWindow() {
21 |   /**
22 |    * Initial window options
23 |    */
24 |   mainWindow = new BrowserWindow({
25 |     height: 700,
26 |     useContentSize: true,
27 |     width: 1200
28 |   })
29 | 
30 | 
31 |   //在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件
32 |   ipcMain.on('getPrinterList', (event) => {
33 | 
34 |     //在主线程中获取打印机列表
35 |     const list = mainWindow.webContents.getPrinters();
36 | 
37 |     //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
38 |     mainWindow.webContents.send('getPrinterList', list);
39 |   });
40 | 
41 | 
42 |   mainWindow.loadURL(winURL)
43 | 
44 |   mainWindow.on('closed', () => {
45 |     mainWindow = null
46 |   })
47 | }
48 | 
49 | app.on('ready', createWindow)
50 | 
51 | app.on('window-all-closed', () => {
52 |   if (process.platform !== 'darwin') {
53 |     app.quit()
54 |   }
55 | })
56 | 
57 | app.on('activate', () => {
58 |   if (mainWindow === null) {
59 |     createWindow()
60 |   }
61 | })
62 | 
63 | /**
64 |  * Auto Updater
65 |  *
66 |  * Uncomment the following code below and install `electron-updater` to
67 |  * support auto updating. Code Signing with a valid certificate is required.
68 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
69 |  */
70 | 
71 | /*
72 | import { autoUpdater } from 'electron-updater'
73 | 
74 | autoUpdater.on('update-downloaded', () => {
75 |   autoUpdater.quitAndInstall()
76 | })
77 | 
78 | app.on('ready', () => {
79 |   if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
80 | })
81 |  */


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <webview src="../../../static/print.html" nodeintegration></webview>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | const ipcRenderer = require("electron").ipcRenderer;
 9 | export default {
10 |   name: "landing-page",
11 |   components: {},
12 |   data() {
13 |     return {
14 |       print0: "",
15 |       print1: ""
16 |     };
17 |   },
18 |   mounted() {
19 |     this.getPrinterList(); //首先先获取
20 |     this. print();
21 |   },
22 |   methods: {
23 |     print() {
24 |       console.log(111);
25 |       const webview = document.querySelector("webview");
26 |       console.log(webview);
27 |       webview.addEventListener("dom-ready", () => {
28 |         console.log("dom-ready");
29 |         //dom-ready---webview加载完成
30 |         webview.openDevTools(); //这个方法可以打开print.html的控制台
31 |         var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14];
32 |         //在send时将arr传递过去
33 |         webview.send("ping", arr); //向webview嵌套的页面响应事件
34 |       });
35 |       webview.addEventListener("ipc-message", event => {
36 |         console.log(event.channel); // Prints "pong" 在此监听事件中接收webview嵌套页面所响应的事件
37 |         if (event.channel == "pong") {
38 |           console.log("通信成功");
39 |           webview.print(
40 |             {
41 |               //是否是静默打印,true为静默打印，false会弹出打印设置框
42 |               silent: true,
43 |               printBackground: true,
44 |               //打印机的名称，this.print1为在getPrinterList()方法中获取到的打印机名字。
45 |               //注意在demo中这是我打印机的设备，在使用本demo时，先去getPrinterList()中找到你使用的打印机
46 |               deviceName: this.print1
47 |             },
48 |             data => {
49 |               //这个回调是打印后的回调事件，data为true就是打印成功，为false就打印失败
50 |               console.log("webview success", data);
51 |             }
52 |           );
53 |         }
54 |       });
55 |     },
56 |     getPrinterList() {
57 |       ipcRenderer.send("getPrinterList");
58 |       //监听主线程获取到打印机列表后的回调
59 |       ipcRenderer.once("getPrinterList", (event, data) => {
60 |         //data就是打印机列表
61 |         this.print0 = data[3].name;
62 |         this.print1 = data[5].name;
63 |         console.log(data[3].name);
64 |         console.log(data[5].name);
65 |       });
66 |     }
67 |   }
68 | };
69 | </script>
70 | 
71 | <style>
72 | </style>
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "electron-print",
  3 |   "version": "0.0.1",
  4 |   "author": "",
  5 |   "description": "An electron-vue project",
  6 |   "license": null,
  7 |   "main": "./dist/electron/main.js",
  8 |   "scripts": {
  9 |     "build": "node .electron-vue/build.js && electron-builder",
 10 |     "build:dir": "node .electron-vue/build.js && electron-builder --dir",
 11 |     "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
 12 |     "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
 13 |     "dev": "node .electron-vue/dev-runner.js",
 14 |     "pack": "npm run pack:main && npm run pack:renderer",
 15 |     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
 16 |     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
 17 |     "postinstall": ""
 18 |   },
 19 |   "build": {
 20 |     "productName": "electron-print",
 21 |     "appId": "com.example.yourapp",
 22 |     "directories": {
 23 |       "output": "build"
 24 |     },
 25 |     "files": [
 26 |       "dist/electron/**/*"
 27 |     ],
 28 |     "dmg": {
 29 |       "contents": [
 30 |         {
 31 |           "x": 410,
 32 |           "y": 150,
 33 |           "type": "link",
 34 |           "path": "/Applications"
 35 |         },
 36 |         {
 37 |           "x": 130,
 38 |           "y": 150,
 39 |           "type": "file"
 40 |         }
 41 |       ]
 42 |     },
 43 |     "mac": {
 44 |       "icon": "build/icons/icon.icns"
 45 |     },
 46 |     "win": {
 47 |       "icon": "build/icons/icon.ico",
 48 |       "extraResources": "./static/*.html"
 49 |     },
 50 |     "linux": {
 51 |       "icon": "build/icons"
 52 |     }
 53 |   },
 54 |   "dependencies": {
 55 |     "vue": "^2.5.16",
 56 |     "axios": "^0.18.0",
 57 |     "vue-electron": "^1.0.6",
 58 |     "vue-router": "^3.0.1",
 59 |     "vuex": "^3.0.1",
 60 |     "vuex-electron": "^1.0.0"
 61 |   },
 62 |   "devDependencies": {
 63 |     "ajv": "^6.5.0",
 64 |     "babel-core": "^6.26.3",
 65 |     "babel-loader": "^7.1.4",
 66 |     "babel-plugin-transform-runtime": "^6.23.0",
 67 |     "babel-preset-env": "^1.7.0",
 68 |     "babel-preset-stage-0": "^6.24.1",
 69 |     "babel-register": "^6.26.0",
 70 |     "babili-webpack-plugin": "^0.1.2",
 71 |     "cfonts": "^2.1.2",
 72 |     "chalk": "^2.4.1",
 73 |     "copy-webpack-plugin": "^4.5.1",
 74 |     "cross-env": "^5.1.6",
 75 |     "css-loader": "^0.28.11",
 76 |     "del": "^3.0.0",
 77 |     "devtron": "^1.4.0",
 78 |     "electron": "^2.0.4",
 79 |     "electron-debug": "^1.5.0",
 80 |     "electron-devtools-installer": "^2.2.4",
 81 |     "electron-builder": "^20.19.2",
 82 |     "mini-css-extract-plugin": "0.4.0",
 83 |     "file-loader": "^1.1.11",
 84 |     "html-webpack-plugin": "^3.2.0",
 85 |     "multispinner": "^0.2.1",
 86 |     "node-loader": "^0.6.0",
 87 |     "style-loader": "^0.21.0",
 88 |     "url-loader": "^1.0.1",
 89 |     "vue-html-loader": "^1.2.4",
 90 |     "vue-loader": "^15.2.4",
 91 |     "vue-style-loader": "^4.1.0",
 92 |     "vue-template-compiler": "^2.5.16",
 93 |     "webpack-cli": "^3.0.8",
 94 |     "webpack": "^4.15.1",
 95 |     "webpack-dev-server": "^3.1.4",
 96 |     "webpack-hot-middleware": "^2.22.2",
 97 |     "webpack-merge": "^4.1.3"
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/.electron-vue/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.NODE_ENV = 'production'
  4 | 
  5 | const { say } = require('cfonts')
  6 | const chalk = require('chalk')
  7 | const del = require('del')
  8 | const { spawn } = require('child_process')
  9 | const webpack = require('webpack')
 10 | const Multispinner = require('multispinner')
 11 | 
 12 | 
 13 | const mainConfig = require('./webpack.main.config')
 14 | const rendererConfig = require('./webpack.renderer.config')
 15 | const webConfig = require('./webpack.web.config')
 16 | 
 17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' '
 18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' '
 19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
 20 | const isCI = process.env.CI || false
 21 | 
 22 | if (process.env.BUILD_TARGET === 'clean') clean()
 23 | else if (process.env.BUILD_TARGET === 'web') web()
 24 | else build()
 25 | 
 26 | function clean () {
 27 |   del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
 28 |   console.log(`\n${doneLog}\n`)
 29 |   process.exit()
 30 | }
 31 | 
 32 | function build () {
 33 |   greeting()
 34 | 
 35 |   del.sync(['dist/electron/*', '!.gitkeep'])
 36 | 
 37 |   const tasks = ['main', 'renderer']
 38 |   const m = new Multispinner(tasks, {
 39 |     preText: 'building',
 40 |     postText: 'process'
 41 |   })
 42 | 
 43 |   let results = ''
 44 | 
 45 |   m.on('success', () => {
 46 |     process.stdout.write('\x1B[2J\x1B[0f')
 47 |     console.log(`\n\n${results}`)
 48 |     console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
 49 |     process.exit()
 50 |   })
 51 | 
 52 |   pack(mainConfig).then(result => {
 53 |     results += result + '\n\n'
 54 |     m.success('main')
 55 |   }).catch(err => {
 56 |     m.error('main')
 57 |     console.log(`\n  ${errorLog}failed to build main process`)
 58 |     console.error(`\n${err}\n`)
 59 |     process.exit(1)
 60 |   })
 61 | 
 62 |   pack(rendererConfig).then(result => {
 63 |     results += result + '\n\n'
 64 |     m.success('renderer')
 65 |   }).catch(err => {
 66 |     m.error('renderer')
 67 |     console.log(`\n  ${errorLog}failed to build renderer process`)
 68 |     console.error(`\n${err}\n`)
 69 |     process.exit(1)
 70 |   })
 71 | }
 72 | 
 73 | function pack (config) {
 74 |   return new Promise((resolve, reject) => {
 75 |     config.mode = 'production'
 76 |     webpack(config, (err, stats) => {
 77 |       if (err) reject(err.stack || err)
 78 |       else if (stats.hasErrors()) {
 79 |         let err = ''
 80 | 
 81 |         stats.toString({
 82 |           chunks: false,
 83 |           colors: true
 84 |         })
 85 |         .split(/\r?\n/)
 86 |         .forEach(line => {
 87 |           err += `    ${line}\n`
 88 |         })
 89 | 
 90 |         reject(err)
 91 |       } else {
 92 |         resolve(stats.toString({
 93 |           chunks: false,
 94 |           colors: true
 95 |         }))
 96 |       }
 97 |     })
 98 |   })
 99 | }
100 | 
101 | function web () {
102 |   del.sync(['dist/web/*', '!.gitkeep'])
103 |   webConfig.mode = 'production'
104 |   webpack(webConfig, (err, stats) => {
105 |     if (err || stats.hasErrors()) console.log(err)
106 | 
107 |     console.log(stats.toString({
108 |       chunks: false,
109 |       colors: true
110 |     }))
111 | 
112 |     process.exit()
113 |   })
114 | }
115 | 
116 | function greeting () {
117 |   const cols = process.stdout.columns
118 |   let text = ''
119 | 
120 |   if (cols > 85) text = 'lets-build'
121 |   else if (cols > 60) text = 'lets-|build'
122 |   else text = false
123 | 
124 |   if (text && !isCI) {
125 |     say(text, {
126 |       colors: ['yellow'],
127 |       font: 'simple3d',
128 |       space: false
129 |     })
130 |   } else console.log(chalk.yellow.bold('\n  lets-build'))
131 |   console.log()
132 | }


--------------------------------------------------------------------------------
/.electron-vue/webpack.web.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.BABEL_ENV = 'web'
  4 | 
  5 | const path = require('path')
  6 | const webpack = require('webpack')
  7 | 
  8 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
  9 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 10 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 11 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 12 | const { VueLoaderPlugin } = require('vue-loader')
 13 | 
 14 | let webConfig = {
 15 |   devtool: '#cheap-module-eval-source-map',
 16 |   entry: {
 17 |     web: path.join(__dirname, '../src/renderer/main.js')
 18 |   },
 19 |   module: {
 20 |     rules: [
 21 |       {
 22 |         test: /\.less$/,
 23 |         use: ['vue-style-loader', 'css-loader', 'less-loader']
 24 |       },
 25 |       {
 26 |         test: /\.css$/,
 27 |         use: ['vue-style-loader', 'css-loader']
 28 |       },
 29 |       {
 30 |         test: /\.html$/,
 31 |         use: 'vue-html-loader'
 32 |       },
 33 |       {
 34 |         test: /\.js$/,
 35 |         use: 'babel-loader',
 36 |         include: [ path.resolve(__dirname, '../src/renderer') ],
 37 |         exclude: /node_modules/
 38 |       },
 39 |       {
 40 |         test: /\.vue$/,
 41 |         use: {
 42 |           loader: 'vue-loader',
 43 |           options: {
 44 |             extractCSS: true,
 45 |             loaders: {
 46 |               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 47 |               scss: 'vue-style-loader!css-loader!sass-loader',
 48 |               less: 'vue-style-loader!css-loader!less-loader'
 49 |             }
 50 |           }
 51 |         }
 52 |       },
 53 |       {
 54 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 55 |         use: {
 56 |           loader: 'url-loader',
 57 |           query: {
 58 |             limit: 10000,
 59 |             name: 'imgs/[name].[ext]'
 60 |           }
 61 |         }
 62 |       },
 63 |       {
 64 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 65 |         use: {
 66 |           loader: 'url-loader',
 67 |           query: {
 68 |             limit: 10000,
 69 |             name: 'fonts/[name].[ext]'
 70 |           }
 71 |         }
 72 |       }
 73 |     ]
 74 |   },
 75 |   plugins: [
 76 |     new VueLoaderPlugin(),
 77 |     new MiniCssExtractPlugin({filename: 'styles.css'}),
 78 |     new HtmlWebpackPlugin({
 79 |       filename: 'index.html',
 80 |       template: path.resolve(__dirname, '../src/index.ejs'),
 81 |       minify: {
 82 |         collapseWhitespace: true,
 83 |         removeAttributeQuotes: true,
 84 |         removeComments: true
 85 |       },
 86 |       nodeModules: false
 87 |     }),
 88 |     new webpack.DefinePlugin({
 89 |       'process.env.IS_WEB': 'true'
 90 |     }),
 91 |     new webpack.HotModuleReplacementPlugin(),
 92 |     new webpack.NoEmitOnErrorsPlugin()
 93 |   ],
 94 |   output: {
 95 |     filename: '[name].js',
 96 |     path: path.join(__dirname, '../dist/web')
 97 |   },
 98 |   resolve: {
 99 |     alias: {
100 |       '@': path.join(__dirname, '../src/renderer'),
101 |       'vue$': 'vue/dist/vue.esm.js'
102 |     },
103 |     extensions: ['.js', '.vue', '.json', '.css']
104 |   },
105 |   target: 'web'
106 | }
107 | 
108 | /**
109 |  * Adjust webConfig for production settings
110 |  */
111 | if (process.env.NODE_ENV === 'production') {
112 |   webConfig.devtool = ''
113 | 
114 |   webConfig.plugins.push(
115 |     new BabiliWebpackPlugin(),
116 |     new CopyWebpackPlugin([
117 |       {
118 |         from: path.join(__dirname, '../static'),
119 |         to: path.join(__dirname, '../dist/web/static'),
120 |         ignore: ['.*']
121 |       }
122 |     ]),
123 |     new webpack.DefinePlugin({
124 |       'process.env.NODE_ENV': '"production"'
125 |     }),
126 |     new webpack.LoaderOptionsPlugin({
127 |       minimize: true
128 |     })
129 |   )
130 | }
131 | 
132 | module.exports = webConfig
133 | 


--------------------------------------------------------------------------------
/.electron-vue/webpack.renderer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.BABEL_ENV = 'renderer'
  4 | 
  5 | const path = require('path')
  6 | const { dependencies } = require('../package.json')
  7 | const webpack = require('webpack')
  8 | 
  9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
 10 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 12 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 13 | const { VueLoaderPlugin } = require('vue-loader')
 14 | 
 15 | /**
 16 |  * List of node_modules to include in webpack bundle
 17 |  *
 18 |  * Required for specific packages like Vue UI libraries
 19 |  * that provide pure *.vue files that need compiling
 20 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 21 |  */
 22 | let whiteListedModules = ['vue']
 23 | 
 24 | let rendererConfig = {
 25 |   devtool: '#cheap-module-eval-source-map',
 26 |   entry: {
 27 |     renderer: path.join(__dirname, '../src/renderer/main.js')
 28 |   },
 29 |   externals: [
 30 |     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
 31 |   ],
 32 |   module: {
 33 |     rules: [
 34 |       {
 35 |         test: /\.less$/,
 36 |         use: ['vue-style-loader', 'css-loader', 'less-loader']
 37 |       },
 38 |       {
 39 |         test: /\.css$/,
 40 |         use: ['vue-style-loader', 'css-loader']
 41 |       },
 42 |       {
 43 |         test: /\.html$/,
 44 |         use: 'vue-html-loader'
 45 |       },
 46 |       {
 47 |         test: /\.js$/,
 48 |         use: 'babel-loader',
 49 |         exclude: /node_modules/
 50 |       },
 51 |       {
 52 |         test: /\.node$/,
 53 |         use: 'node-loader'
 54 |       },
 55 |       {
 56 |         test: /\.vue$/,
 57 |         use: {
 58 |           loader: 'vue-loader',
 59 |           options: {
 60 |             extractCSS: process.env.NODE_ENV === 'production',
 61 |             loaders: {
 62 |               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 63 |               scss: 'vue-style-loader!css-loader!sass-loader',
 64 |               less: 'vue-style-loader!css-loader!less-loader'
 65 |             }
 66 |           }
 67 |         }
 68 |       },
 69 |       {
 70 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 71 |         use: {
 72 |           loader: 'url-loader',
 73 |           query: {
 74 |             limit: 10000,
 75 |             name: 'imgs/[name]--[folder].[ext]'
 76 |           }
 77 |         }
 78 |       },
 79 |       {
 80 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 81 |         loader: 'url-loader',
 82 |         options: {
 83 |           limit: 10000,
 84 |           name: 'media/[name]--[folder].[ext]'
 85 |         }
 86 |       },
 87 |       {
 88 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 89 |         use: {
 90 |           loader: 'url-loader',
 91 |           query: {
 92 |             limit: 10000,
 93 |             name: 'fonts/[name]--[folder].[ext]'
 94 |           }
 95 |         }
 96 |       }
 97 |     ]
 98 |   },
 99 |   node: {
100 |     __dirname: process.env.NODE_ENV !== 'production',
101 |     __filename: process.env.NODE_ENV !== 'production'
102 |   },
103 |   plugins: [
104 |     new VueLoaderPlugin(),
105 |     new MiniCssExtractPlugin({filename: 'styles.css'}),
106 |     new HtmlWebpackPlugin({
107 |       filename: 'index.html',
108 |       template: path.resolve(__dirname, '../src/index.ejs'),
109 |       minify: {
110 |         collapseWhitespace: true,
111 |         removeAttributeQuotes: true,
112 |         removeComments: true
113 |       },
114 |       nodeModules: process.env.NODE_ENV !== 'production'
115 |         ? path.resolve(__dirname, '../node_modules')
116 |         : false
117 |     }),
118 |     new webpack.HotModuleReplacementPlugin(),
119 |     new webpack.NoEmitOnErrorsPlugin()
120 |   ],
121 |   output: {
122 |     filename: '[name].js',
123 |     libraryTarget: 'commonjs2',
124 |     path: path.join(__dirname, '../dist/electron')
125 |   },
126 |   resolve: {
127 |     alias: {
128 |       '@': path.join(__dirname, '../src/renderer'),
129 |       'vue$': 'vue/dist/vue.esm.js'
130 |     },
131 |     extensions: ['.js', '.vue', '.json', '.css', '.node']
132 |   },
133 |   target: 'electron-renderer'
134 | }
135 | 
136 | /**
137 |  * Adjust rendererConfig for development settings
138 |  */
139 | if (process.env.NODE_ENV !== 'production') {
140 |   rendererConfig.plugins.push(
141 |     new webpack.DefinePlugin({
142 |       '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
143 |     })
144 |   )
145 | }
146 | 
147 | /**
148 |  * Adjust rendererConfig for production settings
149 |  */
150 | if (process.env.NODE_ENV === 'production') {
151 |   rendererConfig.devtool = ''
152 | 
153 |   rendererConfig.plugins.push(
154 |     new BabiliWebpackPlugin(),
155 |     new CopyWebpackPlugin([
156 |       {
157 |         from: path.join(__dirname, '../static'),
158 |         to: path.join(__dirname, '../dist/electron/static'),
159 |         ignore: ['.*']
160 |       }
161 |     ]),
162 |     new webpack.DefinePlugin({
163 |       'process.env.NODE_ENV': '"production"'
164 |     }),
165 |     new webpack.LoaderOptionsPlugin({
166 |       minimize: true
167 |     })
168 |   )
169 | }
170 | 
171 | module.exports = rendererConfig
172 | 


--------------------------------------------------------------------------------
/.electron-vue/dev-runner.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | const chalk = require('chalk')
  4 | const electron = require('electron')
  5 | const path = require('path')
  6 | const { say } = require('cfonts')
  7 | const { spawn } = require('child_process')
  8 | const webpack = require('webpack')
  9 | const WebpackDevServer = require('webpack-dev-server')
 10 | const webpackHotMiddleware = require('webpack-hot-middleware')
 11 | 
 12 | const mainConfig = require('./webpack.main.config')
 13 | const rendererConfig = require('./webpack.renderer.config')
 14 | 
 15 | let electronProcess = null
 16 | let manualRestart = false
 17 | let hotMiddleware
 18 | 
 19 | function logStats (proc, data) {
 20 |   let log = ''
 21 | 
 22 |   log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
 23 |   log += '\n\n'
 24 | 
 25 |   if (typeof data === 'object') {
 26 |     data.toString({
 27 |       colors: true,
 28 |       chunks: false
 29 |     }).split(/\r?\n/).forEach(line => {
 30 |       log += '  ' + line + '\n'
 31 |     })
 32 |   } else {
 33 |     log += `  ${data}\n`
 34 |   }
 35 | 
 36 |   log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
 37 | 
 38 |   console.log(log)
 39 | }
 40 | 
 41 | function startRenderer () {
 42 |   return new Promise((resolve, reject) => {
 43 |     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
 44 |     rendererConfig.mode = 'development'
 45 |     const compiler = webpack(rendererConfig)
 46 |     hotMiddleware = webpackHotMiddleware(compiler, {
 47 |       log: false,
 48 |       heartbeat: 2500
 49 |     })
 50 | 
 51 |     compiler.hooks.compilation.tap('compilation', compilation => {
 52 |       compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
 53 |         hotMiddleware.publish({ action: 'reload' })
 54 |         cb()
 55 |       })
 56 |     })
 57 | 
 58 |     compiler.hooks.done.tap('done', stats => {
 59 |       logStats('Renderer', stats)
 60 |     })
 61 | 
 62 |     const server = new WebpackDevServer(
 63 |       compiler,
 64 |       {
 65 |         contentBase: path.join(__dirname, '../'),
 66 |         quiet: true,
 67 |         before (app, ctx) {
 68 |           app.use(hotMiddleware)
 69 |           ctx.middleware.waitUntilValid(() => {
 70 |             resolve()
 71 |           })
 72 |         }
 73 |       }
 74 |     )
 75 | 
 76 |     server.listen(9080)
 77 |   })
 78 | }
 79 | 
 80 | function startMain () {
 81 |   return new Promise((resolve, reject) => {
 82 |     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
 83 |     mainConfig.mode = 'development'
 84 |     const compiler = webpack(mainConfig)
 85 | 
 86 |     compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
 87 |       logStats('Main', chalk.white.bold('compiling...'))
 88 |       hotMiddleware.publish({ action: 'compiling' })
 89 |       done()
 90 |     })
 91 | 
 92 |     compiler.watch({}, (err, stats) => {
 93 |       if (err) {
 94 |         console.log(err)
 95 |         return
 96 |       }
 97 | 
 98 |       logStats('Main', stats)
 99 | 
100 |       if (electronProcess && electronProcess.kill) {
101 |         manualRestart = true
102 |         process.kill(electronProcess.pid)
103 |         electronProcess = null
104 |         startElectron()
105 | 
106 |         setTimeout(() => {
107 |           manualRestart = false
108 |         }, 5000)
109 |       }
110 | 
111 |       resolve()
112 |     })
113 |   })
114 | }
115 | 
116 | function startElectron () {
117 |   var args = [
118 |     '--inspect=5858',
119 |     path.join(__dirname, '../dist/electron/main.js')
120 |   ]
121 | 
122 |   // detect yarn or npm and process commandline args accordingly
123 |   if (process.env.npm_execpath.endsWith('yarn.js')) {
124 |     args = args.concat(process.argv.slice(3))
125 |   } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
126 |     args = args.concat(process.argv.slice(2))
127 |   }
128 | 
129 |   electronProcess = spawn(electron, args)
130 |   
131 |   electronProcess.stdout.on('data', data => {
132 |     electronLog(data, 'blue')
133 |   })
134 |   electronProcess.stderr.on('data', data => {
135 |     electronLog(data, 'red')
136 |   })
137 | 
138 |   electronProcess.on('close', () => {
139 |     if (!manualRestart) process.exit()
140 |   })
141 | }
142 | 
143 | function electronLog (data, color) {
144 |   let log = ''
145 |   data = data.toString().split(/\r?\n/)
146 |   data.forEach(line => {
147 |     log += `  ${line}\n`
148 |   })
149 |   if (/[0-9A-z]+/.test(log)) {
150 |     console.log(
151 |       chalk[color].bold('┏ Electron -------------------') +
152 |       '\n\n' +
153 |       log +
154 |       chalk[color].bold('┗ ----------------------------') +
155 |       '\n'
156 |     )
157 |   }
158 | }
159 | 
160 | function greeting () {
161 |   const cols = process.stdout.columns
162 |   let text = ''
163 | 
164 |   if (cols > 104) text = 'electron-vue'
165 |   else if (cols > 76) text = 'electron-|vue'
166 |   else text = false
167 | 
168 |   if (text) {
169 |     say(text, {
170 |       colors: ['yellow'],
171 |       font: 'simple3d',
172 |       space: false
173 |     })
174 |   } else console.log(chalk.yellow.bold('\n  electron-vue'))
175 |   console.log(chalk.blue('  getting ready...') + '\n')
176 | }
177 | 
178 | function init () {
179 |   greeting()
180 | 
181 |   Promise.all([startRenderer(), startMain()])
182 |     .then(() => {
183 |       startElectron()
184 |     })
185 |     .catch(err => {
186 |       console.error(err)
187 |     })
188 | }
189 | 
190 | init()
191 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![electron-print](https://socialify.git.ci/NicCraver/electron-print/image?forks=1&language=1&name=1&owner=1&stargazers=1&theme=Light)
  2 | 
  3 | 简书上写了更详细的的文档
  4 | https://www.jianshu.com/p/45df1dc37478
  5 | 
  6 | 项目环境
  7 | 
  8 | node 10.15.3
  9 | 
 10 | yarn  1.15.2
 11 | 
 12 | win10
 13 | 
 14 | 代码完成时间2019-4-18
 15 | 
 16 | 废话不多说，先放源码
 17 | 
 18 | GitHub
 19 | 
 20 | [https://github.com/951477037/electron-print](https://github.com/951477037/electron-print)
 21 | 
 22 | ```
 23 | git clone https://github.com/951477037/electron-print.git
 24 | ```
 25 | 
 26 | ```
 27 | //安装依赖
 28 | yarn
 29 | ```
 30 | 
 31 | ```
 32 | //运行项目
 33 | yarn run dev
 34 | ```
 35 | 
 36 | ```
 37 | //打包项目
 38 | yarn run build
 39 | ```
 40 | 
 41 | 目录结构
 42 | ![目录结构](http://upload-images.jianshu.io/upload_images/15562516-2df5d50d68200ae6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 43 | 
 44 | 先在主进程 /src/main/index.js
 45 | 
 46 | ```
 47 | //引入ipcMain
 48 | import {
 49 |   app,
 50 |   BrowserWindow,
 51 |   ipcMain
 52 | } from 'electron'
 53 | ```
 54 | 
 55 | ![index.js代码](http://upload-images.jianshu.io/upload_images/15562516-94f9a652f47fd4b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 56 | 
 57 | 在createWindow方法里添加以下代码，获取打印机列表
 58 | 
 59 | ```
 60 |   //在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件
 61 |   ipcMain.on('getPrinterList', (event) => {
 62 |     //在主线程中获取打印机列表
 63 |     const list = mainWindow.webContents.getPrinters();
 64 |     //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
 65 |     mainWindow.webContents.send('getPrinterList', list);
 66 |   });
 67 | ```
 68 | 
 69 | ![index.js](http://upload-images.jianshu.io/upload_images/15562516-488a2a3db1183179.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 70 | 
 71 | 接下来在LandingPage.vue中也就是渲染进程中添加一下代码
 72 | 
 73 | ```
 74 | const ipcRenderer = require("electron").ipcRenderer;
 75 | ```
 76 | 
 77 | ```
 78 | //使用ipcRenderer与主进程通信，并获取返回值
 79 | ipcRenderer.send("getPrinterList");
 80 | //监听主线程获取到打印机列表后的回调
 81 | ipcRenderer.once("getPrinterList", (event, data) => {
 82 | //data就是打印机列表
 83 | console.log(data);
 84 | });
 85 | ```
 86 | 
 87 | ![LandingPage.vue](http://upload-images.jianshu.io/upload_images/15562516-ab53ac235e403bfc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 88 | 输出结果如下
 89 | ![image](http://upload-images.jianshu.io/upload_images/15562516-032b9165b71ec638.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 90 | 
 91 | 重点来了！！！
 92 | 在static中新建一个print.html文件（如果你害怕打包后会找不到的话，我在最后会提供一个方法不知道你看得仔不仔细），如下图所示
 93 | ![目录结构](http://upload-images.jianshu.io/upload_images/15562516-8ae3b2ba49ae60a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 94 | 如果不在static中新建的话会报错（具体原因我明没有深入去研究）
 95 | ![报错](http://upload-images.jianshu.io/upload_images/15562516-4de40faf2737dc9d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 96 | 
 97 | ```
 98 | <!DOCTYPE html>
 99 | <html lang="en">
100 | <head>
101 |     <meta charset="UTF-8">
102 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
103 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
104 |     <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
105 |     <title>Document</title>
106 |     <style>
107 |         @page {
108 |             margin: 0;
109 |         }
110 |         .a {
111 |             padding-left: 100px;
112 |         }
113 |     </style>
114 | </head>
115 | 
116 | <body>
117 |     <div id='app'>
118 |         <div class="a" v-for="v in arr">{{v}}</div>
119 |     </div>
120 | </body>
121 | <script>
122 |     //引入ipcRenderer对象
123 |     const {
124 |         ipcRenderer
125 |     } = require('electron')
126 |     new Vue({
127 |         el: "#app",
128 |         data: {
129 |             arr: []
130 |         },
131 |         mounted() {
132 |             ipcRenderer.on('ping', (e, arr) => { //接收响应
133 |                 console.log(e)
134 |                 console.log(arr)
135 |                 this.arr = arr;
136 |                 ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息
137 |             })
138 |         },
139 |         methods: {}
140 |     })
141 | </script>
142 | 
143 | </html>
144 | 
145 | ```
146 | 
147 | 创建完成，回到LandingPage.vue中添加以下代码
148 | 注意两个参数
149 | 
150 | ```
151 | silent  是否静默打印
152 | deviceName  打印机名字
153 | 
154 | ```
155 | 
156 | 把deviceName换成你自己的打印机名字
157 | 
158 | ```
159 | <template>
160 |   <div>
161 |     <webview src="../../../static/print.html" nodeintegration></webview>
162 |   </div>
163 | </template>
164 | 
165 | <script>
166 | const ipcRenderer = require("electron").ipcRenderer;
167 | export default {
168 |   name: "landing-page",
169 |   components: {},
170 |   data() {
171 |     return {
172 |       print0: "",
173 |       print1: ""
174 |     };
175 |   },
176 |   mounted() {
177 |     this.getPrinterList(); //首先先获取
178 |     this. print();
179 |   },
180 |   methods: {
181 |     print() {
182 |       const webview = document.querySelector("webview");
183 |       console.log(webview);
184 |       webview.addEventListener("dom-ready", () => {
185 |         console.log("dom-ready");
186 |         //dom-ready---webview加载完成
187 |         webview.openDevTools(); //这个方法可以打开print.html的控制台
188 |         var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14];
189 |         //在send时将arr传递过去
190 |         webview.send("ping", arr); //向webview嵌套的页面响应事件
191 |       });
192 |       webview.addEventListener("ipc-message", event => {
193 |         console.log(event.channel); // Prints "pong" 在此监听事件中接收webview嵌套页面所响应的事件
194 |         if (event.channel == "pong") {
195 |           console.log("通信成功");
196 |           webview.print(
197 |             {
198 |               //是否是静默打印,true为静默打印，false会弹出打印设置框
199 |               silent: true,
200 |               printBackground: true,
201 |               //打印机的名称，this.print1为在getPrinterList()方法中获取到的打印机名字。
202 |               //注意在demo中这是我打印机的设备，在使用本demo时，先去getPrinterList()中找到你使用的打印机
203 |               deviceName: this.print1
204 |             },
205 |             data => {
206 |               //这个回调是打印后的回调事件，data为true就是打印成功，为false就打印失败
207 |               console.log("webview success", data);
208 |             }
209 |           );
210 |         }
211 |       });
212 |     },
213 |     getPrinterList() {
214 |       ipcRenderer.send("getPrinterList");
215 |       //监听主线程获取到打印机列表后的回调
216 |       ipcRenderer.once("getPrinterList", (event, data) => {
217 |         //data就是打印机列表
218 |         this.print0 = data[3].name;
219 |         this.print1 = data[5].name;
220 |         console.log(data[3].name);
221 |         console.log(data[5].name);
222 |       });
223 |     }
224 |   }
225 | };
226 | </script>
227 | 
228 | <style>
229 | </style>
230 | 
231 | 
232 | ```
233 | 
234 | 运行代码
235 | 
236 | ![打印](http://upload-images.jianshu.io/upload_images/15562516-5fffc25bfa27c616.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
237 | 
238 | 
239 | 打包的方法！！！
240 | 打包前在package.json中修改
241 | 
242 | ```
243 | "win": {
244 | 
245 |       "icon": "build/icons/icon.ico",
246 | 
247 |       "extraResources": "./static/*.html"
248 | 
249 |     },
250 | 
251 | ```
252 | 
253 | 打包后，electron-print\build\win-ia32-unpacked\resources中就会存在static
254 | ![打包后目录](http://upload-images.jianshu.io/upload_images/15562516-00af6067ba65f9dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
255 | 
256 | static中
257 | 
258 | ![打包后目录](http://upload-images.jianshu.io/upload_images/15562516-bd25464efc41abb9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
259 | 
260 | 如果觉得有用请点个赞，转发请注明来源，谢谢
261 | 


--------------------------------------------------------------------------------