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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容