前台代码，将当前页面的html内容另存为html从后台到本地功能

最新推荐文章于 2022-02-22 10:42:32 发布

原创最新推荐文章于 2022-02-22 10:42:32 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

这个功能主要用于将当前页面的HTML内容保存到本地。它首先获取页面的标题、富文本编辑器的内容以及所有CSS样式链接，然后创建一个包含所有必要元素的HTML字符串。通过AJAX调用后台接口保存数据，并生成一个唯一的ID，最后下载保存为ZIP文件。该功能还处理了富文本编辑器、历史环节和附件链接的替换。

/**
* 前台代码-->将当前页面的html内容另存为html到本地功能
* @param obj
*/
function saveAs(){
   //html页面名称
   //var htmlTitle = document.getElementsByTagName('title')[0].innerText;

   //获取富文本编辑内容
   var editContent = CKEDITOR.instances.applydescript.getData();

   //css样式路径
   var styleFiles = getLinks();

   //html内容
   var htmlContent = "<html>"+updateLinks()+"</html>

//alert(htmlContent);
   //return;

   //页面id
   var subformpk = $("#id").val();

   //获取唯一ID
   var id = guid();
   //alert(id);

   //文件名称
   var fileName = $("#applyname").html();
   if(fileName == ""){
       fileName = $("#applyname").val();
   }
   if(document.readyState == "complete"){
   var params = {
           styleFiles:styleFiles,
           htmlContent:htmlContent,
           fileName:fileName,
           subformpk:subformpk,
           id:id,
           editContent:editContent,
           filetype:"MARKETING_FILE,REMUNERATION_FILE,CHARGING_FILE,MAR_OTHER_FILE",
       };
   showLoading("正在另存为，请稍后...");

$.ajax({
           type: "POST",
           url: contextPath+"/html/html_htmlSaveAs.do",
           data: params,
           dataType: "json",
           success: function() {
               hideLoading();
               window.open(contextPath+"/html/html_downloadZipFile.do?fileName="+encodeURIComponent(id+"/"+fileName));
               layer.msg("另存为成功");
               //window.location.reload();
               $(".pop-mask").fadeOut(500);
               $(".pop-wrap").fadeOut(500);
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
               hideLoading();
               layer.msg("另存为失败！");
           }
       });

}
}

/*
* 获取样式路径
*/
function getLinks(){
   var port = window.location.port;
var links = document.getElementsByTagName("link");
var link = new Array();
for(var i=0;i<links.length;i++){
var item = links[i].getAttribute('href');
if(item.match(port)){
   var a = item.split(port)[1];
   link.unshift(a);
}else{
   link.unshift(item);
}
}
var styleFiles = link.toString();
return styleFiles;
}

/*
* 修改另存为html页面
*/
function updateLinks(){
   if(document.readyState == "complete"){
       /*
       //添加富文本内容
       var editIframeObjs = document.getElementsByClassName("cke_wysiwyg_frame");
       var editIframeObj = editIframeObjs[0];
       //富文本编辑器内容
       var editContent = CKEDITOR.instances.applydescript.getData();
       var parent =editIframeObj.parentNode;
       var edit_div = document.createElement('div');
       edit_div.innerHTML = editContent;
       alert(edit_div.innerHTML);
       edit_div.class = editIframeObj.class;
       parent.removeChild(editIframeObj);
       parent.appendChild(edit_div);
       */

       //替换历史环节
       /*var iframeObj = document.getElementById("processHistory");
       var iframeContent = iframeObj.contentWindow.document.body.innerHTML;
       // 不可以直接修改，只能是添加一个删除一个
       //var p = document.getElementById('detail');
       var parent = iframeObj.parentNode;
       var div = document.createElement('div');
       div.innerHTML = iframeContent;
       div.id = iframeObj.id;
       parent.removeChild(iframeObj);
       parent.appendChild(div);*/

       //更改附件href
       var attachments = document.getElementsByClassName("text-green");
       for(var i=0;i<attachments.length;i++){
           var name = attachments[i].innerHTML;
   attachments[i].setAttribute('href',"./css/"+name);
       }

       //获取input框的内容
       var inputFrames = document.getElementsByClassName("singleInput");
       for(var i=0; i<inputFrames.length; i++){
           var inputFrame = $(inputFrames[i]);
           var fieldValue = inputFrame.val();
           //alert(fieldValue);
           inputFrame.attr('value', fieldValue);
       }