electron vue printer

Step 1: Install electron and electron-vue

vue create my-electron-app
cd my-electron-app
vue add electron-builder

Step 2: Install electron-printing module

npm install electron-printing --save

Step 3: Update main.js file to use electron-printing

// main.js
const { app, BrowserWindow } = require('electron');
const Printing = require('electron-printing');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', function () {
    mainWindow = null;
  });

  Printing.inject({
    silent: true
  });

  // Other window configurations and event listeners...
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', function () {
  if (mainWindow === null) createWindow();
});

Step 4: Use the electron-printing module in your Vue component

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <button @click="print">Print Page</button>
  </div>
</template>

<script>
const Printing = require('electron-printing');

export default {
  name: 'HelloWorld',
  methods: {
    print() {
      Printing.print({
        silent: false,
        color: true,
        marginsType: 1,
        printBackground: true
      });
    }
  }
};
</script>

Step 5: Add the HelloWorld component to your main App component

<!-- App.vue -->
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

Step 6: Update package.json for printing permissions

"build": {
  "productName": "my-electron-app",
  "appId": "com.example.myelectronapp",
  "files": [
    "dist/electron//*"
  ],
  "dmg": {
    "contents": [
      {
        "x": 410,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 150,
        "type": "file"
      }
    ]
  },
  "mac": {
    "icon": "build/icons/icon.icns"
  },
  "win": {
    "icon": "build/icons/icon.ico"
  },
  "linux": {
    "icon": "build/icons"
  },
  "directories": {
    "output": "dist"
  },
  "publish": [
    {
      "provider": "github",
      "releaseType": "release"
    }
  ],
  "asar": false,
  "extraResources": [
    {
      "from": "node_modules/electron-printing/build/Release/electron-printing.node",
      "to": "dist/electron/"
    }
  ]
}

Step 7: Build and run your Electron Vue app

npm run electron:serve