How to view a PDF in an Electron BrowserWindow?

在 Electron 中查看 PDF 文件可以通过几种不同的方法实现。以下是一些常见的实现方式：

1. 使用 PDF.js

PDF.js 是一个由 Mozilla 开发的通用的、基于 Web 的 PDF 查看器。它使用 JavaScript 编写，可以很容易地集成到 Electron 应用中。

步骤如下：

• 安装 PDF.js
  可以通过 npm 安装 PDF.js：

  bash
  npm install pdfjs-dist

• 在 Electron 中使用 PDF.js
  在渲染进程的 HTML 文件中引入 PDF.js：

  html
  <script src="node_modules/pdfjs-dist/build/pdf.js"></script>

• 加载和渲染 PDF 文件
  使用 PDF.js 加载 PDF 文件，并在一个 canvas 元素上渲染它：

  javascript
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  
  // 使 PDF.js 兼容浏览器环境
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
  
  // 打开 PDF 文档
  pdfjsLib.getDocument('path/to/your/document.pdf').promise.then(function(pdfDoc) {
    console.log('PDF loaded');
  
    // 获取第一页
    pdfDoc.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({scale: scale});
  
      // 准备 canvas 和渲染上下文
      var canvas = document.getElementById('pdfCanvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
  
      // 渲染 PDF 页面
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function () {
        console.log('Page rendered');
      });
    });
  });

2. 使用内置的 Chrome PDF Viewer

Electron 基于 Chromium，因此可以直接利用内置的 Chrome PDF Viewer 来显示 PDF 文件。

步骤如下：

• 创建一个新的 BrowserWindow 实例并加载 PDF 文件
  你可以直接将 PDF 文件的路径作为 BrowserWindow 加载的 URL：

  javascript
  const { BrowserWindow } = require('electron');
  
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.loadURL('file:///path/to/your/file.pdf');

这两种方法都是在 Electron 应用中实现 PDF 查看功能的有效方式。选择哪种方法取决于你的具体需求，比如是否需要更多的 PDF 操作功能（如 PDF.js 提供的更多控制）或是倾向于简单的实现（如使用 Chromium 的内置 PDF 查看器）。