当我单击另存为 HTML 而不是右键单击浏览器并保存时，如何将 React 单页保存为 HTML答案

【问题标题】：how can i save React single page as HTML when i click on Save as HTML instead for right click on Browser and save it当我单击另存为 HTML 而不是右键单击浏览器并保存时，如何将 React 单页保存为 HTML
【发布时间】：2021-05-11 06:42:38
【问题描述】：

我添加了按钮另存为 HTML，当我点击它按钮时，我的网页下载为 html，而不是右键单击浏览器并保存。
当我右键单击浏览器并保存它时，通过单击我的网页上的按钮完成的过程完全相同。
所以请给我一个活生生的例子或解决方案

【问题讨论】：

嗨，凯文，欢迎来到 SO，如果您想看到您的问题得到解答，我建议您阅读：How to Ask，help center。

标签： javascript html save

【解决方案1】：

假设您有以下 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save Demo</title>
</head>

<body>
    <p>Hello World</p>
    <button id="save-btn">Save as HTML</button>
    <script src="app.js"></script>
</body>

</html>

当用户单击按钮时，您希望将页面下载为 HTML 文件。

首先，让我们创建一个可重用的下载函数，它接受一个字符串filename 和一个字符串contents，并创建一个名为filename 的文件，其中包含contents。

function download(filename, contents) {
  // Create an anchor tag to download the file
  const anchor = document.createElement('a');
  // Create an href that contains the contents of the file
  // encodeURIComponent encodes a text string as a valid component of a URI
  anchor.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(contents));
  // set the download attribute to download the given filename
  anchor.setAttribute('download', filename);
  // Anchor tag should be invisible
  anchor.style.display = 'none';
  document.body.appendChild(anchor);
  // Fire the event
  anchor.click();
  // Remove the anchor tag
  document.body.removeChild(anchor);
}

给定"helloworld.txt" 的文件名和"This is a really cool text file" 的内容，该函数将下载具有给定内容的文件helloworld.txt。

现在我们只需要在按钮上创建一个事件监听器，以便在点击时下载 html。

const btn = document.querySelector('#save-btn');

btn.addEventListener('click', (evt) => {
  // create a container for the html
  const container = document.createElement('div');
  // create an html element
  const html = document.createElement('html');
  // set the inner html of the html element to be the inner html of the document (everything except the <html></html>)
  html.innerHTML = document.documentElement.innerHTML;
  // append the html element to the container, to keep the <html></html>
  container.appendChild(html);
  // download the file as index.html
  download('index.html', container.innerHTML);
});

这将下载一个包含 HTML 文件中除 <!DOCTYPE html> 之外的所有内容的文件，您可以通过调用 download 来添加它：

download('index.html', '<!DOCTYPE html>' + container.innerHTML);

【讨论】：