当我在浏览器中单击另存为 HTML 时，如何下载 web 页面的部分内容而不是所有内容

Question

当我单击另存为 HTML 按钮时，它会下载 web 页面的所有内容，但我需要从所有内容中下载一些特定内容。

 function download(filename, contents) { const anchor = document.createElement('a'); anchor.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(contents)); anchor.setAttribute('download', filename); anchor.style.display = 'none'; document.body.appendChild(anchor); anchor.click(); document.body.removeChild(anchor); } const btn = document.querySelector('#save-btn'); btn.addEventListener('click', (evt) => { const container = document.createElement('div'); const html = document.createElement('html'); html.innerHTML = document.documentElement.innerHTML; container.appendChild(html); download('index.html', container.innerHTML); });

 <p>Hello World</p> <button id="save-btn">Save as HTML</button> <div> <p>Hello World-1</p> <p>Hello World-2</p> <p>Hello World-3</p> </div>

在上面的 HTML 示例中，当我单击另存为 HTML 按钮时，我下载了部分文件，例如下载 div 内容而不是所有内容。 当我打开下载文件时，它只显示以下内容：

<div>
  <p>Hello World-1</p>
  <p>Hello World-2</p>
  <p>Hello World-3</p>
</div>

Answer 1

要仅下载特定元素的 HTML，请将逻辑更改为该元素而不是整个主体的 select，如下所示：

document.querySelector('#save-btn').addEventListener('click', e => {
  e.preventDefault();
  let html = document.querySelector('div').outerHTML; // update this selector in your local version    
  download('index.html', html);
});

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  
  element.click();
  document.body.removeChild(element);
}

工作示例