Click a URL and download it as HTML instead of visiting it

Question

Newbie here.

I am learning from here and I'm facing a problem.

The original script works fine in the 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>

But if I change /images/myw3schoolsimage.jpg to https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer.html, it goes to the website.

But I want it to download the webpage as HTML file when the URL is clicked.

Something like when you right-click a link on a page and choose "download linked file" in safari.

I am using safari 13.0.3 by the way. How can I do that?

score 1 · Answer 1 · answered Jul 18 '20 at 08:45

The download attribute only works for same-origin URLs or the blog and data schemes. The example you're trying would work if it was on the same website you're running it on. Try to change the URL to a link on the www.w3schools.com domain and you'll see it'll work.

score 1 · Accepted Answer · answered Jul 18 '20 at 09:06

Intercept the link click.

Download the page as plain text with javascript and a CORS bypass.

Build a temporary new link and then click it.

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();
        }
    });

});

score 0 · Answer 3 · answered Jul 18 '20 at 08:29

You can try something like,

download="page you desire to download!!"

Please try this code in your browser, it works!

<!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>

When I copy your code to text editor and save it as xxx.html and open this html, I can see the download link. But for some reason, when I click the link, it seems it only refreshes the page. It doesn't go to stackoverflow, it doesn't download anything either — halfmoonhalf, Jul 21 '20 at 10:31

smmehrab · Answer 4 · 2020-07-18T08:37:06.483

Are you trying to download some other page's HTML from your page?

I don't think you can download the linked page's HTML that simply.

When you click on that URL, some HTTP GET requests get sent by the browser to that website's server and the server returns the necessary htmls, stylesheets and javascript files so that your browser can show the website to you.

So, if you are trying to download the page as html, you must make that request to the server. If you don't want to visit the website while the url is clicked (Or don't want your browser to redirect to that website), you may make the GET request manually from your javascript file.

But there are cross-domain issues, that won't allow you to do so. For further, you may check this question,

Get HTML content from another site

Are you trying to download some other page's HTML from your page? --> --> yes. — halfmoonhalf, Jul 21 '20 at 10:27

score 0 · Answer 5 · answered Jul 18 '20 at 08:34

0

Original answer: Download current html file

You can use download attribute and onClick javascript function to convert the page into html file and download it.

<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>

answered Jul 18 '20 at 08:34

Anish Sapkota

774
9
19

Following your method, when I click the download button, safari does download a html file! But the html file corresponds to the page with the download button, not the target stackoverflow page. The downloaded html file's name is https___stackoverflow.com_questions_156686_how-to-start-automatic-download-of-a-file-in-internet-explorer.html – halfmoonhalf Jul 21 '20 at 10:24
So it is like the Original answer: Download current html file. But I want to download another page specified by me. – halfmoonhalf Jul 21 '20 at 10:25
I am not sure not it seems in this case "download=" attribute only specifies the downloaded html file's name – halfmoonhalf Jul 21 '20 at 10:27
Replace the value of download attribute with the link you want to download. – Anish Sapkota Jul 21 '20 at 14:41

Click a URL and download it as HTML instead of visiting it

5 Answers5

Linked