JS實現保存當前網頁HTML到本地

1.保存本頁面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>網頁HTML存本地</title>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
  <a href="#">保存文件</a>
  <script>
    function fake_click(obj) {
      var ev = document.createEvent("MouseEvents");
      ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
      );
      obj.dispatchEvent(ev);
    }

    function export_raw(name, data) {
      var urlObject = window.URL || window.webkitURL || window;

      var export_blob = new Blob([data]);

      var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      fake_click(save_link);
    }
    var test=document.getElementsByTagName('html')[0].outerHTML;
    console.log(test);
    $('a').click(function() {
      export_raw('test.html', test);
    });
  </script>
</body>
</html>

2.保存當前頁面中iframe頁面里面的html;

js如何獲取iframe頁面內的對象,注意地方:
需要在服務器下運行;

父級頁面須保證頁面內容加載完畢,即js獲取iframe頁面內容需要在window.onload中寫

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>網頁HTML存本地</title>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
  <iframe id="viewPage" src="template.html" width="100%" height="100%" frameborder="0" style="overflow-y: auto;"></iframe>

  <a href="#">保存文件</a>
  <script>
    function fake_click(obj) {
      var ev = document.createEvent("MouseEvents");
      ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
      );
      obj.dispatchEvent(ev);
    }

    function export_raw(name, data) {
      var urlObject = window.URL || window.webkitURL || window;

      var export_blob = new Blob([data]);

      var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      fake_click(save_link);
    }

    window.onload = function(){
      //獲取iframe里面的所有html
      this.test=$("#viewPage").contents().find("html").html();
      //獲取本頁面的所有html
      // var test=document.getElementsByTagName('html')[0].outerHTML;
      console.log(test);
    }
    $('a').click(function() {
      export_raw('test.html', test);
    });
  </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容