ElectronJS 是一个开源框架，它使用 HTML、CSS 和 JavaScript 等 Web 技术来构建跨平台的原生桌面应用程序，这些应用能够在 Windows、macOS 和 Linux 操作系统上运行。它将 Chromium 引擎和 NodeJS 结合到一个单一的运行时环境中。
在某些桌面应用程序中，我们作为开发者可能希望提供一项功能，允许用户下载页面内容并将其作为 PDF 文件保存到他们的系统中。例如，在银行应用程序中，用户可能希望下载屏幕上显示的账户对账单并将其保存为 PDF 文件。Electron 提供了一种方法，让我们可以使用 BrowserWindow 对象和 webContents 属性来实现这一功能。webContents 属性为我们提供了特定的实例事件和方法，通过这些方法，我们可以将显示的 BrowserWindow 的内容转换为 PDF 文件，或者将远程 URL 的内容保存为 PDF 文件。本教程将演示如何在 Electron 中生成 PDF 文件。
我们假设您已经熟悉上述链接中涵盖的先决条件。为了让 Electron 能够正常工作，系统中需要预装 node 和 npm。
项目结构：
示例： 我们将按照以下步骤开始构建基本的 Electron 应用程序。
步骤 1： 导航到一个空目录以设置项目，然后运行以下命令，
npm init
- 以生成 package.json 文件。如果尚未安装 Electron，请使用 npm 进行安装。
npm install electron --save
- 此命令还将创建 package-lock.json 文件并安装所需的 node_modules 依赖项。根据项目结构创建 assets 文件夹。我们将把生成的 PDF 文件保存到这个文件夹中。 package.json:
{
"name": "electron-pdf",
"version": "1.0.0",
"description": "Generate PDF in Electron",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"electron"
],
"author": "Radhesh Khanna",
"license": "ISC",
"dependencies": {
"electron": "^8.2.5"
}
}
步骤 2： 根据项目结构创建 main.js 文件。该文件是 主进程，充当应用程序的入口点。从以下 链接 中复制 main.js 文件的样板代码。为了适应我们的项目需求，我们修改了代码。
main.js:
javascript
CODEBLOCK_1ee38e6f
步骤 3： 在 src 目录内创建 index.html 文件和 index.js 文件。我们还将从上述链接中复制 index.html 文件的样板代码。为了适应我们的项目需求，我们也修改了这部分代码。
index.html:
html
<!– https://www.electronjs.org/docs/latest/tutorial
security#csp-meta-tag –>