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