单击 URL 并将其下载为 HTML，而不是访问它答案

【问题标题】：Click a URL and download it as HTML instead of visiting it单击 URL 并将其下载为 HTML，而不是访问它
【发布时间】：2020-07-18 21:12:47
【问题描述】：

这里是新手。

我正在向here 学习，但我遇到了问题。

原始脚本在demo 中运行良好。

HTML：

<!DOCTYPE html> 
<html> 
    <body>
    
        <h1>The a download attribute</h1>
    
        <p>Click on the image to download it:<p> 
        <a href="/images/myw3schoolsimage.jpg" download>   
            <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142"> 
        </a>
    
        <p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>
    
    </body> 
</html>

但如果我将/images/myw3schoolsimage.jpg 更改为https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer.html，它会转到网站。

但我希望它在单击 URL 时将网页下载为 HTML 文件。

类似于在页面上右键单击链接并在 safari 中选择“下载链接文件”。

顺便说一句，我正在使用 safari 13.0.3。我该怎么做？

【问题讨论】：

标签： html

【解决方案1】：

拦截链接点击。

使用 javascript 和 CORS 绕过将页面作为纯文本下载。

建立一个临时的新链接，然后点击它。

https://jsfiddle.net/5ot02w4y/3/

$("a[download]").click(function(e) {
    e.preventDefault();
    $.ajax({
        url: "https://cors-anywhere.herokuapp.com/" + $(this).attr("href"),
        headers: {
            "X-Requested-With": "true"
        },
        success: function(data) {    
            var a = $('<a></a>');

            a.attr("href", window.URL.createObjectURL(new Blob([data], {
                type: 'text/plain'
            })));

            a.attr("download", "page.html");

            $("body").append(a);

            a[0].click();
        }
    });

});

【讨论】：

【解决方案2】：

The download attribute only works for same-origin URLs or the blog and data schemes. 如果您正在尝试的示例位于您正在运行它的同一网站上，则它会起作用。尝试将 URL 更改为 www.w3schools.com 域上的链接，您会发现它会起作用。

【讨论】：

【解决方案3】：

你可以试试，

download="page you desire to download!!"

请在您的浏览器中尝试此代码，它可以工作！

<!DOCTYPE html>
<html>
<body>

<h1>The a download attribute</h1>

<p>Click on the below link to download the file:<p>
<a href="" download="https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer.html">
  click here to download
</a>

<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>

</body>
</html>

【讨论】：

当我将您的代码复制到文本编辑器并保存为 xxx.html 并打开此 html 时，我可以看到下载链接。但是由于某种原因，当我单击该链接时，它似乎只刷新了页面。它不会进入stackoverflow，也不会下载任何东西

【解决方案4】：

原答案：Download current html file

您可以使用下载属性和onClick javascript函数将页面转换为html文件并下载。

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer.html">Download</a>

【讨论】：

按照你的方法，当我点击下载按钮时，safari 确实下载了一个 html 文件！但是html文件对应的是带有下载按钮的页面，而不是目标stackoverflow页面。下载的 html 文件名为 https___stackoverflow.com_questions_156686_how-to-start-automatic-download-of-a-file-in-internet-explorer.html
所以它就像原来的答案：下载当前的html文件。但我想下载我指定的另一个页面。
我不确定在这种情况下似乎“download="属性只指定了下载的html文件的名称
将下载属性的值替换为您要下载的链接。

【解决方案5】：

您是否尝试从您的页面下载其他页面的 HTML？

我认为你不能简单地下载链接页面的 HTML。

当您单击该 URL 时，浏览器会向该网站的服务器发送一些 HTTP GET 请求，服务器会返回必要的 html、样式表和 javascript 文件，以便您的浏览器可以向您显示该网站。

因此，如果您尝试将页面下载为 html，则必须向服务器发出该请求。如果您不想在点击 url 时访问该网站（或者不希望您的浏览器重定向到该网站），您可以从您的 javascript 文件中手动发出 GET 请求。

但存在跨域问题，不允许您这样做。进一步，您可以检查这个问题，

Get HTML content from another site

【讨论】：

您是否尝试从您的页面下载其他页面的 HTML？ --> --> 是的。
我太初级了，看不懂你给的链接:))