时间戳

首页 > 解决方案 > 自动将 URL 下载为 HTML 文件，而不是访问页面

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

问题描述

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

我设法获得一个 .html 文件以将某个 URL 下载为 html 文件，使用下面的代码，按照此处的说明进行操作。

<!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，使用下面的代码，按照此处的说明进行操作。

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

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

标签： htmljquery

解决方案

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

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

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

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

运行下面的代码片段以查看正在浏览器中下载的文件。（如果该代码段未下载文件，则意味着堆栈溢出代码段正在阻止它）将此代码添加到网站中，它将正常工作。

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

推荐阅读