Automatically download URL as HTML file instead of visiting the page

Question

I would like to have a local .html file. When I open it in safari, it will automatically download a certain URL as html file.

I manage to get a .html file to download a certain URL as html file, using below code, following instructions here.

<!DOCTYPE html>
<html>
   <body>
      <a href="https://stackoverflow.com/questions/11438864/get-html-content-from-another-site" download >a website</a>
      <script src="./jquery.js"></script>
      <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         $("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) {
               console.log("The data is:", 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();
             }
           });
         
         });
         
      </script>
   </body>
</html>

I also manage to get a .html file to automatically visit a URL, using below code, following instructions here.

<html>
   <head>
      <title>Start Auto Download file</title>
      <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         $(function() {
         $('a[data-auto-download]').each(function(){
         var $this = $(this);
         setTimeout(function() {
         window.location = $this.attr('href');
         }, 0000);
         });
         });
      </script>
   </head>
   <body>
      <div class="wrapper">
         <p>The download should start shortly. If it doesn't, click
            <a data-auto-download href="https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer">here</a>.
         </p>
      </div>
   </body>
</html>

When I try to combine both code (see below), I get error

undefined is not an object (evaluating 'e.preventDefault')

.

<html>
   <head>
      <title>Start Auto Download URL as html file</title>
      <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         $(function() {
         $('a[data-auto-download]').each(function(){
         var $this = $(this);
         setTimeout(function(e) {
           e.preventDefault();
           $.ajax({
             url: "https://cors-anywhere.herokuapp.com/" + $(this).attr("href"),
             headers: {
               "X-Requested-With": "true"
             },
             success: function(data) {
               console.log("The data is:", 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();
             }
           });
         
         }, 0000);
         });
         });
      </script>
   </head>
   <body>
      <div class="wrapper">
         <p>The download should start shortly. If it doesn't, click
            <a data-auto-download href="https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer">here</a>.
         </p>
      </div>
   </body>
</html>

I am too junior to debug it. Please help me. thanks in advance.

Always Helping · Accepted Answer · 2020-07-27T07:26:31.163

You are not using the correct scope of this. You have defined the variable var $this = $(this); in the .each function but you in your setTimeout you calling $(this) which refers to the setTimeout function which will undefined.

Also you do no need to use e.PreventDefault in setTimeout function as it will run anyway and there is no default behaviour for that to use prevent.Default

In addition we do not need to define 000 in setTimeout just put 0 which means it will run as soon the page is loaded or you can set 1000 so that it wait for 1 seconds before starting download.

Working Codepen Demo: https://codepen.io/alwayshelping/pen/NWxmERQ

Run snippet below to see the file being downloaded in your browser. (If the snippet is not download the file that means stack-overflow snippet is blocking it) Add this code to in website and it will work fine.

$(function() {
  $('a[data-auto-download]').each(function() {
    var $this = $(this);
    setTimeout(function() {
      $.ajax({
        url: "https://cors-anywhere.herokuapp.com/" + $this.attr("href"), //this was not called properly
        headers: {
          "X-Requested-With": "true"
        },
        success: function(data) {
          console.log("The data is:", 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();
        }
      });

    }, 0);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Start Auto Download URL as html file</title>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  </script>
</head>

<body>
  <div class="wrapper">
    <p>The download should start shortly. If it doesn't, click
      <a data-auto-download href="https://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer">here</a>.
    </p>
  </div>
</body>

</html>

@halfmoonhalf I am glad to hear that. Happy coding! – Always Helping Jul 28 '20 at 06:41 — Always Helping, Jul 28 '20 at 06:41

Automatically download URL as HTML file instead of visiting the page

1 Answers1