Iframe和a标签的downLoad新属性实现-调用浏览器的本地下载功能
2017-04-13 19:26
591 查看
//js中的html结构
<a class="downLoadA" style="display: inline-block;float:left;width: 40px;height: 40px;"><img id="downLoadImg" style="width:40px;height:40px;border:none;" type="button" class="downLoadImg_btn" src="/ngcs/src/js/communication/huawei/media/clientArea/downLoadImg.png"/></a</div>
//js如下完整代码;
//点击调用浏览器的本地下载功能
var downLoadImg = function() {
//获取图片的路径
var imgPathSrc = $('#headImg',this.$el).attr("src");
if(imgPathSrc.indexOf("_min") != "-1") {
var temp = imgPath.indexOf("_min").split("_min");
var part1 = temp[0];
var part2 = temp[1];
imgPathSrc = part1 + part2;
}
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
//判断是否IE浏览器
if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
return "IE";
};
//判断是否IE浏览器
if(userAgent.indexOf("Trident") > -1) {
return "Edge";
}
}
//调用当前时间作为图片的名字
function getNowFormatDate() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + month + strDate + date.getHours()+ date.getMinutes()+ date.getSeconds()+randNum(0, 9)+randNum(0, 9)+randNum(0, 9)+randNum(0, 9);
return currentdate;
}
function randNum(x, y) {
return Math.floor(Math.random()*(y - x + 1) + x);
}
//弹框的点击事件调用本地下载功能
function DownLoadReportIMG(imgPathURL) {
//如果隐藏IFRAME不存在,则添加
if (!document.getElementById("IframeReportImg")){
iframeIEDown = $('<iframe style="display:none;" id="IframeReportImg" src='+imgPathURL+' name="IframeReportImg" width="0" height="0" src="about:blank"></iframe>');
iframeIEDown.appendTo("body");
}
if(navigator.userAgent.toLowerCase().indexOf('se 2.x')>-1&&navigator.userAgent.toLowerCase().indexOf('trident')){
setTimeout(function(){
document.frames["IframeReportImg"].document.execCommand("SaveAs");
$('#IframeReportImg').remove();
},90);
}else{
setTimeout(function(){
document.frames["IframeReportImg"].document.execCommand("SaveAs");
$('#IframeReportImg').remove();
},30);
}
}
if(myBrowser() === "IE" || myBrowser() === "Edge") {
DownLoadReportIMG(imgPathSrc)
} else {
//!IE
$('.downLoadA').attr('href', imgPathSrc);
if(navigator.userAgent.indexOf("Firefox") > -1){
$('.downLoadA').attr('download', getNowFormatDate()+imgPathSrc.substr(-4));
}else{
$('.downLoadA').attr('download', getNowFormatDate());
}
}
}
<a class="downLoadA" style="display: inline-block;float:left;width: 40px;height: 40px;"><img id="downLoadImg" style="width:40px;height:40px;border:none;" type="button" class="downLoadImg_btn" src="/ngcs/src/js/communication/huawei/media/clientArea/downLoadImg.png"/></a</div>
//js如下完整代码;
//点击调用浏览器的本地下载功能
var downLoadImg = function() {
//获取图片的路径
var imgPathSrc = $('#headImg',this.$el).attr("src");
if(imgPathSrc.indexOf("_min") != "-1") {
var temp = imgPath.indexOf("_min").split("_min");
var part1 = temp[0];
var part2 = temp[1];
imgPathSrc = part1 + part2;
}
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
//判断是否IE浏览器
if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
return "IE";
};
//判断是否IE浏览器
if(userAgent.indexOf("Trident") > -1) {
return "Edge";
}
}
//调用当前时间作为图片的名字
function getNowFormatDate() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + month + strDate + date.getHours()+ date.getMinutes()+ date.getSeconds()+randNum(0, 9)+randNum(0, 9)+randNum(0, 9)+randNum(0, 9);
return currentdate;
}
function randNum(x, y) {
return Math.floor(Math.random()*(y - x + 1) + x);
}
//弹框的点击事件调用本地下载功能
function DownLoadReportIMG(imgPathURL) {
//如果隐藏IFRAME不存在,则添加
if (!document.getElementById("IframeReportImg")){
iframeIEDown = $('<iframe style="display:none;" id="IframeReportImg" src='+imgPathURL+' name="IframeReportImg" width="0" height="0" src="about:blank"></iframe>');
iframeIEDown.appendTo("body");
}
if(navigator.userAgent.toLowerCase().indexOf('se 2.x')>-1&&navigator.userAgent.toLowerCase().indexOf('trident')){
setTimeout(function(){
document.frames["IframeReportImg"].document.execCommand("SaveAs");
$('#IframeReportImg').remove();
},90);
}else{
setTimeout(function(){
document.frames["IframeReportImg"].document.execCommand("SaveAs");
$('#IframeReportImg').remove();
},30);
}
}
if(myBrowser() === "IE" || myBrowser() === "Edge") {
DownLoadReportIMG(imgPathSrc)
} else {
//!IE
$('.downLoadA').attr('href', imgPathSrc);
if(navigator.userAgent.indexOf("Firefox") > -1){
$('.downLoadA').attr('download', getNowFormatDate()+imgPathSrc.substr(-4));
}else{
$('.downLoadA').attr('download', getNowFormatDate());
}
}
}
相关文章推荐
- Webdriver实现下载功能,屏蔽掉windows弹出的对话框,FireFox下设置浏览器的属性,两种实现方式:
- 浏览器端javascript调用手机终端本地功能实现03-拍照
- 浏览器端javascript调用手机终端本地功能实现02-功能点汇总
- 浏览器端javascript调用手机终端本地功能实现01-前言
- 使用递归方法实现,向FTP服务器上传整个目录结构、从FTP服务器下载整个目录到本地的功能
- Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用
- FileDownLoad1.0 类似 使用迅雷下载 功能实现和心得
- dedecms list增加noflag属性的方法 实现让列表标签不调用有推荐属性的文章
- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- Windows 注册自定义的协议 实现通过网页调用本地程序的功能例如QQ等
- 自定义浏览器协议,实现web程序调用本地程序
- 使用递归方法实现,向FTP服务器上传整个目录结构、从FTP服务器下载整个目录到本地的功能
- iframe标签实现form表单提交(如文件上传下载)不刷新
- 把漫画浏览器的离线下载的功能给实现了一下
- 调用hadoop api实现文件的上传、下载、删除、创建目录和显示功能
- Jquery LigerUI框架学习(二)之Tree于Tab标签实现iframe功能
- HTML5拖拽文件到浏览器并实现文件上传下载功能代码
- Java 实现生成Excel,以下载方式返回浏览器本地
- jquery实现兼容浏览器的图片上传本地预览功能
- 用struts2实现下载功能时,浏览器取消下载时后台出现的异常