在JavaScript中如何解决用execCommand(

 更新时间:2015年10月19日 09:18:08   作者:cxiaoluab  
这篇文章主要给大家介绍在JavaScript中如何解决用execCommand("SaveAS")保存页面兼容性问题,设计到execCommand兼容性问题,感兴趣的朋友可以参考下本篇文章

本解决方案仅适应asp.net mvc 开发环境,其他环境仅供参考。

问题描述:在开发中遇到这样的需求,保存页面,通常使用JavaScript的saveAs进行保存,各浏览器对saveAs支持,见下表。

代码一:初始保存的代码,只有IE6,7,8支持。

 function CmdSave() {
  var OW = window.open('', "_blank", "");
  var DD = new Date();
  OW.document.open();
  var content = document.getElementById("content").innerHTML;
  OW.document.write(content);
  var name = mineName + "-" + $("#selDate").val() + ".htm";
  OW.document.execCommand("saveAs", false, name);//执行保存,IE6,IE7,IE8有效
  OW.close();
 }

解决方案:考虑到下载兼容性好,也能起到保存页面的作用,故采用了先生成页面,再下载页面这样的解决方案。

代码二:采用下载方式保存页面代码。

 function CmdSave() {
  var css = "<style type='text/css'>.trNormalTd { border-top-width: 0px; border-bottom-width: 0px;text-align:right;}.trLastTd {border-top-width: 0px;text-align:right;}.trFirstTd{border-bottom-width: 0px;text-align: right;}</style>";
  var html = document.getElementById("content").innerHTML;
  var content = css + html;
  var name = mineName + "-" + $("#selDate").val() + ".htm";
  savePage(content, name);
}
 //content 内容 fileName 文件名 先在服务器生成页面,然后再下载生成的页面
 function savePage(content, fileName) {
  $.ajax({
   type: 'post',
   dataType: 'text',
   url: 'FXBB/BCYM',
   data: {
    content: content,
    fileName: fileName
   },
   success: function (result) {
    var url = "YXGZ/DBFX/BBCX/FXBB/XZYM?fileName=" + fileName;
    var downloadUrl = window.location.protocol + "//" + window.location.host + "/" + url;
    window.open(downloadUrl);//下载页面
    //deleteFile(fileName);
   },
   error: function (msg) {
    alert("保存出错");
   }
  });
 }
  //保存页面
  public int BCYM(string content, string fileName)
  {
   string path = System.AppDomain.CurrentDomain.BaseDirectory;
   path = Path.Combine(path, @"Upload\FXBB");
   //清空保存文件文件夹文件
   foreach (string d in Directory.GetFileSystemEntries(path))
   {
    if (File.Exists(d))
    {
     File.Delete(d);
    }
   }
   //生成要保存的页面
   path = System.AppDomain.CurrentDomain.BaseDirectory;
   path = Path.Combine(path, "Upload/FXBB/" + fileName);
   using (StreamWriter sw = new StreamWriter(path, false, Encoding.UTF8))// File.AppendText(path))
   {
    sw.WriteLine(content);
    sw.Flush();
   }
   return 1;
  }
//下载页面
  public void XZYM(string fileName)
  {
   string path = System.AppDomain.CurrentDomain.BaseDirectory;
   path = Path.Combine(path, @"Upload\FXBB\" + fileName);
   string filePath = path;//Server.MapPath("DownLoad/aaa.zip");//路径
   //以字符流的形式下载文件
   FileStream fs = new FileStream(filePath, FileMode.Open);
   byte[] bytes = new byte[(int)fs.Length];
   fs.Read(bytes, 0, bytes.Length);
   fs.Close();
   System.Web.HttpContext.Current.Response.ContentType = "application/octet-stream";
   //通知浏览器下载文件而不是打开
   System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));
   System.Web.HttpContext.Current.Response.WriteFile(filePath);
  }

以上内容就是本文关于execcommand兼容性问题的全部叙述,希望大家喜欢。

相关文章

  • JavaScript 自定义属性 data-*使用介绍

    JavaScript 自定义属性 data-*使用介绍

    Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息,读取的时候是通过dataset对象,使用”.”来获取属性,需要去掉data-前缀
    2023-06-06
  • 基于javascript实现贪吃蛇小游戏

    基于javascript实现贪吃蛇小游戏

    这篇文章主要介绍了基于javascript实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • layui结合form,table的全选、反选v1.0示例讲解

    layui结合form,table的全选、反选v1.0示例讲解

    今天小编就为大家分享一篇layui结合form,table的全选、反选v1.0示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript 反射和属性赋值实例解析

    JavaScript 反射和属性赋值实例解析

    这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    本文给出如何在页面上同步显示服务器时间的解决方案,能够实现同步服务器时间、同步倒计时,却不占用服务器太多资源,下面我给写出实现的思路
    2015-09-09
  • 用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能...
    2007-01-01
  • JS vs TS二分法博弈对比分析

    JS vs TS二分法博弈对比分析

    这篇文章主要介绍了JS vs TS二分法博弈对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • js数字输入框(包括最大值最小值限制和四舍五入)

    js数字输入框(包括最大值最小值限制和四舍五入)

    以前需要做一个数字输入的InputBox,结果无奈需求太BT,搞得焦头烂额,重做了无数次。无奈之下,再次Google,发现早有成熟的插件了(闷在家里造轮子果然不好啊),autoNumeric使用方便,功能强大,现在介绍给大家,一个非常好的jquery plugin。
    2009-11-11
  • JS正则表达式学习之贪婪和非贪婪模式实例总结

    JS正则表达式学习之贪婪和非贪婪模式实例总结

    这篇文章主要介绍了JS正则表达式学习之贪婪和非贪婪模式用法,结合实例形式总结分析了JS正则表达式中贪婪模式与非贪婪模式的具体功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JavaScript进制数之间的互相转换

    JavaScript进制数之间的互相转换

    这篇文章主要介绍了JavaScript进制数之间的互相转换,进制转换是人们利用符号来计数的方法,下文基于JavaScript实现进制数之间的转换,有一定的知识性参考价值,需要的小伙伴可以参考一下
    2022-05-05

最新评论