js 將網頁生成爲html保存訪問

2012-04-03

今天實現了一個需求，主題是將瀏覽中的網頁生成html保存起來，記錄訪問url，掛在公司網站上作案例。

 

 

首先忙活了N久的是去搜索生成html的js函數。

 

什麼IE自帶的ActiveX，js插件，js的winow.print();函數調用打印機打印頁面等

 

最後結果是怎麼搞都是不行。

 

就快到窮途末路時，在stackoverflow.com網站看到一條問題，也是與生成html相關的。

 

牛人解決方案以下：

 

使用jQuery

 

// 看到這句我頓時啞語了，這麼簡單的方法我怎麼想不到

 

var dom = $("html").html(); //獲取html節點的內容

//alert(dom);

 

$.post("exportCase.do",{dom:$("html").html()}); //服務器接受請求處理，將html內容輸出爲xxx.htm保存到你想指定的路徑

 

 

 

 

 

最後我借鑑與此，寫了一個完善的js函數：

< script  type = "text/javascript" >

<!--

function  exportCase() {

      try{

            var  filename = prompt( "請輸入要生成的html文件名：" , "" );

             if (undefined==filename ||  "" ==filename) {

                  new  Boxy( "<div style='width:300px;height:100px;'><p>文件名爲空，生成失敗</p></div>" ,  { title :  '消息提示' } );

                   return ;

             }

             //alert("export filename:"+filename);

             $j.ajax( {

                   type :  "post" ,

                  url :  "exportCaseAjax.do" ,

                  cache :  "false" ,

                  data :  {

                         "dom" :$j( "html" ).html(),

                         "filename" :filename,

                         "rnd" : ajaxRandom()

                   } ,

                  dataType: "json" ,

                  success :  function (data, textStatus)  {

                        if (!isUndefined(data)) {

                              var  code = data.code;

                               //alert(code);

                               if (code==0) {

                                    var  d = data.data;

                                     new  Boxy( "<div style='width:400px;height:100px;'><p>" +d.name+ "文件生成成功!</p><p>訪問路徑爲:</p><p>&nbsp;&nbsp;" +d.url+ "</p></div>" ,  { title :  '消息提示' } );

                               } else {

                                    new  Boxy( "<div style='width:300px;height:100px;'><p>" +data.data+ "</p></div>" ,  { title :  '消息提示' } );

                               }

                        }

                  }

            } );   

       }catch (err) {}     

}

//-->

</ script >

 

 

服務器處理的action代碼我就不貼出來了，用I/O就好了。