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

回答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>

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

})

回答3:

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.

NPM
GitHub

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>

来源：https://stackoverflow.com/questions/43220321/electron-pdf-viewer

标签

node.js

pdf

electron