将当前页面作为 HTML 保存到服务器

简介

在 Web 开发过程中，我们有时需要将当前页面保存到服务器上，以便进行后续处理或备份。这个过程可以分成两步：

1. 将当前页面的 HTML 内容获取到；
2. 将获取到的内容保存到服务器上。

本文将介绍如何使用 JavaScript 来完成这两个步骤。

获取 HTML 内容

获取 HTML 内容有多种方法，下面介绍其中两种常用的方法。

方法一：使用 document.documentElement.outerHTML

const html = document.documentElement.outerHTML;

该方法获取整个 HTML 页面的内容，包括 DOCTYPE、html 、head 和 body 标签及其内部内容。返回的内容是一个字符串，可以直接用于保存到文件或上传至服务器。

方法二：使用 Ajax 获取页面内容

const xhr = new XMLHttpRequest();
xhr.open('GET', document.location.href, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const html = xhr.responseText;
  }
};
xhr.send();

该方法使用 Ajax 请求当前页面的 URL，获取整个页面的内容。返回的内容同样是一个字符串，可以直接用于保存到文件或上传至服务器。

保存 HTML 内容

保存 HTML 内容需要借助服务器端的代码来实现，这里介绍一种常用的方法。

方法一：使用 PHP 保存 HTML 内容

<?php
$html = $_POST['html'];
$file = 'path/to/save.html';
file_put_contents($file, $html);
?>

该方法使用 PHP 接收 POST 请求提交的 HTML 内容，将其保存到指定的文件中。同时，需要使用以下 JavaScript 代码将获取到的 HTML 内容以 POST 方式提交给服务器。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'save.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
const data = 'html=' + encodeURIComponent(html);
xhr.send(data);

这段 JavaScript 代码将获取到的 HTML 内容以 POST 方式提交给 save.php 文件，save.php 文件将 HTML 内容保存到指定的文件中。

总结

本文介绍了如何使用 JavaScript 将当前页面的 HTML 内容获取到，并使用 PHP 将其保存到服务器中。这个过程可以根据实际需求做出相应的改动，如使用其他服务器端语言或使用 Ajax 直接上传至服务器等。