Question

我想添加一个按钮来下载我的网页html源代码，我能够做到这一点，但是问题是当我添加一个本地主机url时，它可以工作，但是当我添加实时url时，它是打开的URL，而不是下载它。到目前为止，我已经尝试过了

 <a download  href="http://localhost/test-new/">Download Source Code</a>

我也尝试过

<button onclick="clicker()">Click me</button>



<script type="text/javascript">

function clicker() {
    var anchorTag = document.createElement('a');
    anchorTag.href = "http://localhost/test-new/";
    anchorTag.download = "download";
    anchorTag.click();


    var element = document.getElementById('divContainer');
    element.appendChild(anchorTag);
}

</script>

这两者均在localhost中运行，但不适用于实时URL。请帮助我

Answer 1

您可以使用

document.querySelectorAll('*')

获取网页的源代码

console.log(document.querySelectorAll('*'))

Answer 2

此代码应该起作用。

但是有一个主要限制，可以阻止您下载其他页面- CORS policy 。如果此策略不允许，则无法从另一个域获取数据。出于安全原因，现代浏览器对此进行了限制。

但是，如果您下载当前页面，则不会出现任何问题。只需在开发工具控制台的输出中查看错误即可：

Access to fetch at 'URL_HERE' from origin has been blocked by CORS...

const btn = document.querySelector('.download-btn');
btn.addEventListener('click', (e) => clicker(e.currentTarget.dataset.url), false);

function clicker(url) {
  fetch(url)
    .then(res => res.text())
    .then(html => downloadAsFile('My file name.txt', html));
}

function downloadAsFile(name, text) {
  const link = createDownloadableLink(name, text);
  const clickEvent = new MouseEvent('click');
  link.dispatchEvent(clickEvent);
}

function createDownloadableLink(fileName, content) {
  let link = document.createElement("a");
  link.download = fileName;
  link.href = `data:application/octet-stream,${content}`;
  return link;
}

<button 
  class="download-btn" 
  data-url="http://localhost:1234/"
>Click me if CORS allow</button>

如何下载当前网页

2 个答案: