I'm trying to open pdf in electron app with electron-pdf-window. Its working fine before build but when i build app as installer .exe file for windows and install exe file on windows 8.1 , its not showing pdf window, i am using it through renderer process on click of anchor. Any ideas?
here is my code
function pdfWindow() {
const { BrowserWindow } = require('electron').remote
const PDFWindow = require('electron-pdf-window')
const win = new BrowserWindow({ width: 800, height: 800 })
PDFWindow.addSupport(win)
win.loadURL('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
}
and i am calling this function on click of anchor tag
If you're using the latest Electron 1.8 or newer, it has built in PDF support in BrowserWindow's and <webview> tags. You just have to ensure plugins are enabled:
BrowserWindow
const window = new BrowserWindow({
width: 1024,
height: 800,
webPreferences: {
plugins: true
}
});
window.loadURL('path/to/file.pdf');
<webview> Tag
<webview src="path/to/file.pdf" plugins></webview>
Related
Problem:
I have an electron app that uses the camera.
The app already exists for a few years with no issues on this side but lately, I have had a new issue specific to Mac M1 running MacOS Ventura. It takes a long time for the camera to load (around 8-10 seconds) and sometimes it even fails to do so.
NotReadableError: Failed to allocate videosource
Stack:
Electron: 15.5.4
Electron builder: 23.1.0
MacOS: 12.6
Intel processor
My code:
In order to present the camera I'm using the following code:
const constraints = {
audio: true,
video: { width: 800, height: 600 }
};
navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((err) => {
// always check for errors at the end.
console.error(`${err.name}: ${err.message}`);
});
And to create the browserWindow:
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
// and load the index.html of the app.
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
);
So far conclusions:
When I build my app on M1 it works flawlessly but I do want to keep building it on x86 machine and with x64 arch.
Building an arm64 arch on x86 machine doesn't solve this issue.
I made an app with camera only and it still happen.
I have a problem to change icon in Electron.
The code work fine, but when I add the line <<icon: "img/icon.png">> is produced a blank program (without anything).
This is the code:
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: false
},
icon: "img/icon.png"
});
win.setMenu(null);
win.loadFile('index.html');
win.webContents.openDevTools();
}
To change icon of the window pass it in BrowserWindow constructor and use absolute path for simplification
icon (NativeImage | String) (optional) - The window icon. On Windows it is recommended to use ICO icons to get best visual effects, you can also leave it undefined so the executable's icon will be used.
You will need to use some converter to generate .ico and .icns files.
let icon;
switch (process.platform) {
case 'win32': icon = path.resolve(__dirname, 'img', 'icon.ico'); break;
case 'darwin': icon = path.resolve(__dirname, 'img', 'icon.icns'); break;
case 'linux': icon = path.resolve(__dirname, 'img', 'icon.png'); break;
}
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: false
},
icon
});
Also, you can create NativeImage like this: const icon = nativeImage.createFromPath(path.resolve(__dirname, 'img', 'icon.png'));
But, you don't actually need to set icons manually, electron will use executable's icon by default. So just configure electron-packager to use proper icons (add packagerConfig: { icon: img/icon } } in forge.config.js and place icon.png, icon.icns and icon.ico into img dir)
Right, but the problem is that doesn't exist anything of error.
But... I've just done another attempt with the following command: electron-package --overwrite --icon=icon.ico
Now works!!! but the question is: WHY ???
I'm developing an app using Electron. Using win.loadFile('index.html') used to work, but from yesterday it throws an error saying: win.loadFile is not a function.
Could it be "Knex.js" which caused this error? Because I installed it recently and the problems began to appear after that. Also, I noticed that Electron icon changed from transparent to a light blue (green) circle.
In addition, Using loadURL works but it renders the html file incompletely.
This is my main.js (I removed knex.js code from main.js but didn't help):
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html');
}
app.on('ready', createWindow)
Check your Electron version. The version of Electron you want to run, install it globally. Here's the issue on GitHub:
BrowserWindow .loadFile is not a function
I have an electron desktop application which opens 2 new windows when I load it, the code to open the new windows is this:
electron = require('electron')
win = electron.remote.getCurrentWindow();
BrowserWindow = electron.remote.BrowserWindow;
wind = new BrowserWindow({
width: 400,
height: 200,
x:3,
y:12,
frame: false,
// transparent: true,
alwaysOnTop: true, // Add this line
// skipTaskbar:true, // don't show icon on taskbar
opacity:0.9,
})
Now when I'm testing my application, I use the Reload command a lot (ctrl+R on windows). My problem is that when I do it, the windows remain open and it opens more windows on top of it.
How can I make Reload close all windows?
The onbeforeunload event is triggered (In the renderer) when a window is closed or reloaded. You can use this to close the individual window.
Otherwise you can inform electron via a IPC message to close all your windows for you.
Something like this should do the job.
// renderer/index.js
const {ipcRenderer} = require('electron')
ipcRenderer.send('my-closeallwindowsasap-channel') // can have arguments
// -------------------------------------------------------
// main/index.js
ipcMain.on('my-closeallwindowsasap-channel', (event, arg) => {
BrowserWindow.getAllWindows().forEach(window => {
window.close()
})
})
I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.