自动将 URL 下载为 HTML 文件，而不是访问页面答案

【问题标题】：Automatically download URL as HTML file instead of visiting the page自动将 URL 下载为 HTML 文件，而不是访问页面
【发布时间】：2020-07-28 14:43:40
【问题描述】：

我想要一个本地 .html 文件。当我在 safari 中打开它时，它会自动将某个 URL 下载为 html 文件。

我设法获得一个 .html 文件以将某个 URL 下载为 html 文件，使用以下代码，按照说明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>

我还设法获得一个 .html 文件以自动访问 URL，使用以下代码，按照说明 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>

当我尝试合并两个代码时（见下文），我得到错误

undefined 不是一个对象（评估 '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>

我太初级，无法调试它。请帮我。提前致谢。

【问题讨论】：

标签： html jquery

【解决方案1】：

您没有使用正确的this 范围。您已经在 .each 函数中定义了变量 var $this = $(this);，但您在 setTimeout 中调用了 $(this)，它指的是未定义的 setTimeout 函数。

此外，您无需在setTimeout 函数中使用e.PreventDefault，因为它无论如何都会运行，并且没有默认行为可以使用prevent.Default

此外，我们不需要在 setTimeout 中定义000，只需输入0，这意味着它会在页面加载后立即运行，或者您可以设置1000，以便在开始下载之前等待1 seconds .

工作 Codepen 演示：https://codepen.io/alwayshelping/pen/NWxmERQ

在下面运行 sn-p 以在浏览器中查看正在下载的文件。（如果 sn-p 没有下载文件，则意味着 stack-overflow sn-p 正在阻止它）将此代码添加到网站中，它将正常工作。

$(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 我很高兴听到这个消息。编码愉快！