如何在 Chrome 浏览器中将网页保存为 JavaScript 文件？

Chrome 保存页面的 JavaScript 实现

在现代浏览器中，JavaScript 提供了多种方法来保存网页内容，本文将介绍如何在 Google Chrome 中使用 JavaScript 保存网页为 HTML 文件或 PDF 文件，我们将讨论两种主要方法：使用 Blob 对象和 FileSaver.js 库。

Blob 对象

Blob（Binary Large Object）是 Web API 的一部分，用于表示不可变的原始数据类文件对象，我们可以利用 Blob 对象将网页内容保存为文件。

以下是一个简单的示例，演示如何使用 Blob 对象将当前页面的内容保存为 HTML 文件：

function savePageAsHTML() {
    const htmlContent = document.documentElement.outerHTML;
    const blob = new Blob([htmlContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'page.html';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
// 调用函数以保存页面
savePageAsHTML();

在这个例子中，我们首先获取整个 HTML 文档的内容，然后创建一个包含这些内容的 Blob 对象，我们创建一个临时的下载链接，并触发点击事件以启动下载，清理创建的元素和释放 URL 资源。

保存为 PDF 文件

Chrome 支持通过print 函数将网页保存为 PDF 文件，我们可以利用这一点来实现保存功能：

function savePageAsPDF() {
    window.print();
}
// 调用函数以保存页面
savePageAsPDF();

当用户调用window.print() 时，浏览器会显示打印预览界面，用户可以在其中选择“保存为 PDF”选项，这种方法依赖于用户的交互，不能自动完成所有步骤。

FileSaver.js 库

FileSaver.js 是一个开源的 JavaScript 库，可以简化文件保存的过程，它提供了saveAs 函数，可以直接保存 Blob 对象为文件。

安装 FileSaver.js

你可以通过以下方式引入 FileSaver.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

下面是使用 FileSaver.js 保存 HTML 内容的示例：

function savePageAsHTMLWithFileSaver() {
    const htmlContent = document.documentElement.outerHTML;
    const blob = new Blob([htmlContent], { type: 'text/html' });
    saveAs(blob, 'page.html');
}
// 调用函数以保存页面
savePageAsHTMLWithFileSaver();

在这个例子中，我们使用了saveAs 函数直接保存 Blob 对象为文件，无需创建临时链接和触发点击事件。

虽然 FileSaver.js 本身不提供直接生成 PDF 的功能，但我们可以将网页内容转换为 Base64 编码的字符串，然后将其保存为 PDF 文件，这需要一些额外的处理，例如使用第三方库如jsPDF。

function savePageAsPDFWithFileSaver() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    doc.text('Hello world!', 10, 10);
    doc.save('a4.pdf');
}
// 调用函数以保存页面
savePageAsPDFWithFileSaver();

在这个例子中，我们使用了jsPDF 库来生成 PDF 文件，并通过save 方法保存，需要注意的是，jsPDF 需要在页面中引入相应的脚本。

表格对比

方法	描述	优点	缺点
Blob 对象	使用 Blob 对象保存 HTML 或 PDF	无需外部依赖	需要手动创建下载链接
FileSaver.js	使用 FileSaver.js 库保存文件	简化文件保存过程	需要引入外部库
`window.print()`	使用浏览器内置的打印功能	简单易用	需要用户交互
`jsPDF` + FileSaver.js	使用`jsPDF` 生成 PDF 并保存	功能强大	需要引入外部库和处理 Base64 编码