Electron PDF viewer

Question

I have an Electron app that loads URL from PHP server. And the page contains an iFrame having a source to PDF. The PDF page seems absolutely ok in a normal web browser but asks for download in Electron. Any help?

My codes for html page is

<h1>Hello World!</h1>
Some html content here...
<iframe src="http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" width="1200" height="800"></iframe>

And my js code is something like

mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

app.on('ready', createWindow)

Any help would be really greatful...

Answer 1

Electron is shipping already with an integrated PDF viewer plugin. However, plugins are deactivated by default. So you have to activate them:

For a BrowserWindow you do:

let win = new BrowserWindow({
  webPreferences: {
    plugins: true
  }
})

And for a <webview> you do it like this:

<webview src="example.com" plugins></webview>

Answer 2

You will need https://github.com/gerhardberger/electron-pdf-window

Example:

const { app } = require('electron')
const PDFWindow = require('electron-pdf-window')

app.on('ready', () => {
  const win = new PDFWindow({
    width: 800,
    height: 600
  })

win.loadURL('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')

})