Question

我有一个从PHP服务器加载URL的Electron应用程序。该页面包含一个具有PDF源代码的iFrame。在普通的网络浏览器中，PDF页面似乎绝对正常，但要求在Electron中下载。有什么帮助吗？

我的html网页代码是

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

我的js代码就像

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)

任何帮助都会非常棒......

Answer 1

Electron已经发布了集成的PDF查看器插件。但是，默认情况下会停用插件。所以你必须激活它们：

对于BrowserWindow，您可以：

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

对于<webview>，您可以这样做：

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

Answer 2

你需要 https://github.com/gerhardberger/electron-pdf-window

示例：

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

}）

Answer 3

此答案将侧重于Angular的实现。

经过一年的等待（由Electron解决），我最终决定采用一种解决方法。对于需要完成此任务的人，这是可行的。解决方法是将捆绑包大小增加总共500K，但要付出一定的代价。（对于Angular）

使用Mozilla PDF.js库的解决方法。

NPM
GitHub

实施1（设置nodeIntegration: true）

此实现没有问题，您可以通过提到的库文件来实现。但是，如果遇到其他问题，例如在更改路线时创建白色窗口，这是由于将nodeIntegration属性设置为true而引起的。如果是这样，请使用以下实现。

实施2（设置nodeIntegration: false）

这是Electron的默认设置。使用此配置并查看PDF有点棘手。解决方案是使用Uint8Array而不是blob或base64。

您可以使用以下函数将base64转换为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;
}

或将blob转换为数组缓冲区

const blob = response;
let arrayBuffer = null;

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

然后将生成的Uint8Array作为pdfSource传递到ng2-pdfjs-viewer。

HTML

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

Answer 4

Electron 9.0.0已启用PDF查看器。

npm install electron@9.0.0

电子PDF查看器

4 个答案: