前端实现弹出“另存为”对话框的三种方式

今天开发一个需求，需要将一段字符串保存到文件中，并且保存之后在页面上弹出“另存为”对话框来实现将文件保存到指定位置。那么应该如何来实现在前端弹出“另存为”对话框呢？

调用document.execCommand方法

调用js方法document.execCommand可在前台页面调出“另存为”对话框，并将将服务器上存放的文件保存到本地指定的位置。需要注意的是，部分IE浏览器中，可能会阻止显示内容，点击上方"允许阻止的内容“即可正常运行。
示例代码如下：

<script language='javascript' type='text/javascript'>
  function saveImg() {
    //将服务器上图片存放到本地的方法
    event.returnValue=false;
    show.window.location.href=img.src;
    timer=setInterval(saveAs,500)
  }

  function saveAs(){
    if(frame.readyState!="complete"){
        //'Saveas'表示打开“文件另存为”对话框命令
        frame.document.execCommand('SaveAs');
        clearInterval(timer)
    }
  }  
</script>
<img id="img" width="320px" height="200px" src="HelloWorld.jpg" alt=""/>
<input id="btnSave" type="button" value="另存为" onclick="saveImg()"/>
<iframe  name="frame"  style="width:0;height:0"></iframe>

调用ActiveX控件

创建一个“MSComDlg.CommonDialog”对象，也可在前台页面调出另存为对话框，与前面的js方法不同，该ActiveX控件还能获取到你选择的本地保存路径。但缺点是客户端需要注册“COMDLG32.OCX”，且客户端浏览器对ActiveX安全级别要求较低，否则将无法弹出“另存为”对话框。
示例代码：

try{
  OCXResult.Result.value = "";
  //创建一个ActiveX对象
  var fd = new ActiveXObject("MSComDlg.CommonDialog"); 
  //设置保存文件类型选项
  fd.Filter = "JPG图片|*.jpg";    
  fd.FilterIndex = 2;
  fd.fileName="HelloWorld.jpg";
  // 必须设置文件的最大内存
  fd.MaxFileSize = 256;
  //打开“另存为”对话框
  fd.ShowSave();
}catch(e){
  confirm("您的系统尚未注册COMDLG32.OCX，请先下载注册此控件后再重新进行操作);
}

使用第三方Web控件

现如今有许多第三方Web框架提供的控件已经可以很轻松的实现各种复杂的UI，因此找到一款简单好用的Web框架会大大的提高前端开发的效率，像诸如此类的前端操作也将会变得很容易处理。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

前端实现弹出“另存为”对话框的三种方式