在 ElectronJS 中将页面另存为 HTML

ElectronJS是一个开源框架，用于使用能够在 Windows 、 macOS和Linux操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

所有 Chromium 浏览器都支持将网页作为HTML文件保存到本机系统上。通常，此功能由 Chromium 浏览器中任何网页上的简单 Ctrl+S键盘快捷键触发。 Electron 也表现出这种行为，并允许我们使用 BrowserWindow对象的实例方法和 webContents属性在本机系统上将 BrowserWindow 实例保存为 HTML 文件。每个BrowserWindow实例都在其自己的单独Renderer Process 中运行。每个渲染器进程都是独立的，并且有自己的 HTML、CSS 和 JavaScript 文件与之关联。我们可以只保存 HTML 文件，也可以分别保存 HTML 及其关联的 CSS 和 JS 文件，具体取决于提供给webContents属性的实例方法的选项。本教程将演示如何在 Electron 的本机系统上将 BrowserWindow 实例保存为 HTML 文件。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

• 项目结构：

示例：按照 ElectronJS 中桌面操作中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。还要执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。

包.json：

{
  "name": "electron-html",
  "version": "1.0.0",
  "description": "Save HTML Page in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

根据项目结构创建资产文件夹。我们将使用assets文件夹作为默认路径来保存应用程序生成的 HTML 及其相关文件。根据项目结构创建index.css 文件。创建此文件仅用于演示目的，我们将此文件保留为空白。
输出：此时，我们的基本电子应用程序已设置。启动应用程序后，我们应该会看到以下结果。

在 Electron 中保存 HTML 文件： BrowserWindow实例和webContents属性是Main Process 的一部分。为了在Renderer Process 中导入和使用BrowserWindow ，我们将使用 Electron远程模块。

• index.html ：在该文件中添加以下代码段。 “将此页面另存为 HTML”和“将 GeeksForGeeks 页面另存为 HTML”按钮还没有与它们相关的任何功能。

html

    

  

  
Save Pages as HTML file
    
      Save This Page as HTML
    
    
      Save GeeksForGeeks Page as HTML
    

• index.js ：在该文件中添加以下代码段。

javascript

const electron = require('electron');
const path = require('path');
// Importing BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
  
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
  
// Specifying the assets folder as the default path
const filepathlocal = path.join(__dirname, '../assets/page.html');
const filepathload = path.join(__dirname, '../assets/geeksforgeeks.html');
  
var save = document.getElementById('save');
save.addEventListener('click', () => {
    // Works for the Local Page
    win.webContents.savePage(filepathlocal, 'HTMLComplete').then(() => {
        console.log('Page was saved successfully.')
    }).catch(err => {
        console.log(err);
    });
});
  
var load = document.getElementById('load');
load.addEventListener('click', (event) => {
    // Creating a New BrowserWindow Instance, Loading GeeksForGeeks.org
    // And Saving it as an External Page
    let window = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    window.loadURL('https://www.geeksforgeeks.org/');
    window.webContents.openDevTools();
    window.webContents.on('did-finish-load', async () => {
        window.webContents.savePage(filepathload, 'HTMLOnly').then(() => {
            console.log('Page was saved successfully.')
        }).catch(err => {
            console.log(err)
        });
    });
});

win.webContents.savePage(filepath, saveType) Instance 方法用于根据 saveType参数将当前 BrowserWindow实例作为 HTML 文件保存到本机系统上。它返回一个Promise并在网页成功保存时解析。它接受以下参数。

• filepath: String该参数不能为空。它指定了我们想要在本地系统上保存生成的 HTML 和相关文件的文件路径。在我们的代码中，我们使用 path模块指定了资产文件夹的文件路径以及文件名。
• saveType: String该参数不能为空。它指定需要在 BrowserWindow实例上执行的保存操作的类型。它可以采用以下任一值。
  • HTMLOnly： saveType属性的这个值只保存当前 BrowserWindow实例的 HTML 文件，没有任何关联的文件。
  • HTMLComplete： saveType属性的这个值将当前 BrowserWindow实例的完整网页分别保存在指定的 filepath 中，包括 HTML 文件和关联的 JavaScript 和 CSS 文件。此值在指定的文件路径中创建一个新文件夹page_files。此文件夹包含已保存网页的其他 CSS 和 JS 文件。
  • MHTML： saveType属性的这个值将 BrowserWindow实例的 HTML 文件保存为 MHTML 。它代表MIME HTML ，它是聚合 HTML 文档的 MIME 封装。它是一种网页格式，用于将代码中由外部超链接表示的 HTML 代码及其资源(如图像、音频、视频文件等)组合成单个 HTML 文件。 MHTML文件的内容使用 MIME 内容类型multipart/related进行编码。

did-finish-load实例事件属于webContents属性。当网页导航(由window.loadURL()实例方法指定)完成并且页面完全加载时发出。当页面的微调器停止旋转并且已调度onload 事件时，就会发生这种情况。在我们的代码中，我们使用此实例事件等待GeeksForGeeks.org网站完全加载到我们的BrowserWindow实例中，然后才能将 HTML 文件保存到我们的系统中。
要在Renderer Process 中获取当前BrowserWindow实例，我们可以使用BrowserWindow对象提供的一些静态方法。

• BrowserWindow.getAllWindows()：此方法返回活动/打开的 BrowserWindow 实例的数组。在这个应用程序中，我们只有一个活动的BrowserWindow实例，它可以直接从 Array 中引用，如代码所示。
• BrowserWindow.getFocusedWindow()：此方法返回在应用程序中聚焦的 BrowserWindow 实例。如果未找到当前 BrowserWindow 实例，则返回null 。在此应用程序中，我们只有一个活动的BrowserWindow实例，可以使用此方法直接引用它，如代码所示。

输出：通过指定win.webContents.savePage(filepathlocal, ‘MHTML’)保存当前BrowserWindow实例，生成 MHTML 输出文件。