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

您所在的位置:网站首页 obc工作原理 前端实现弹出“另存为”对话框的三种方式

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

2023-08-05 07:10| 来源: 网络整理| 查看: 265

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

调用document.execCommand方法

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

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) } } 调用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框架会大大的提高前端开发的效率,像诸如此类的前端操作也将会变得很容易处理。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3