CODEWITHSUNDEEP
node.jspdfelectron
Hari Babu
Hari Babu

Reputation: 244

Electron PDF viewer

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...

Upvotes: 13

Views: 28952

Answers (4)

flori
flori

Reputation: 15837

Electron is shipping already with an integrated PDF viewer.

So you can load PDF files just like normal HTML files, the PDF viewer will automatically show up.

E.g. in BrowserWindow with .loadURL(…), in <iframes>, <object> and also with the, at the moment discouraged, <webview>.

PS: The need to enable the plugins property in the BrowserWindow or <webview> is no more needed since Electron 9.

Upvotes: 23

wobsoriano
wobsoriano

Reputation: 13434

Electron 9.0.0 has enabled PDF viewer already.

npm install [email protected]

Upvotes: 0

ymssa___
ymssa___

Reputation: 1073

This answer will focus on implementation with Angular.

After year of waiting (to be solved by the Electron) finally I decided to apply a workaround. For the people who needs it done, here it goes. Workaround comes with a cost of increasing bundle size totally 500K. (For Angular)

Workaround to use Mozilla PDF.js library.

Implementation 1 (Setting nodeIntegration: true)

This implementation has no issue, you can implement by the document of the library mentioned. But if you run into additional problem like creating white window when route is changed, it is due to the setting nodeIntegration property to true. If so, use the following implementation.

Implementation 2 (Setting nodeIntegration: false)

This is the default by Electron. Using this configuration and viewing the PDF is bit tricky. Solution is to use Uint8Array instead of a blob or base64.

You can use the following function to convert base64 to Uint8Array.

base64ToArrayBuffer(data): Uint8Array {
  const input = data.substring(data.indexOf(',') + 1);
  const binaryString = window.atob(input ? input : data);
  const binaryLen = binaryString.length;
  const bytes = new Uint8Array(binaryLen);
  for (let i = 0; i < binaryLen; i++) {
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }
  return bytes;
}

Or convert blob to array buffer

const blob = response;
let arrayBuffer = null;

arrayBuffer = await new Response(blob).arrayBuffer();

then pass the generated Uint8Array as the pdfSource to the ng2-pdfjs-viewer.

HTML

<ng2-pdfjs-viewer zoom="100" [pdfSrc]="pdfSource"></ng2-pdfjs-viewer>

Upvotes: 0

Jason Livesay
Jason Livesay

Reputation: 6377

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')

})

Upvotes: 1

Related Questions