在JavaScript中如何解决用execCommand(

所属分类: 网络编程 / JavaScript 阅读数: 938
收藏 0 赞 0 分享

本解决方案仅适应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兼容性问题的全部叙述,希望大家喜欢。

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多