js实现前端下载图片和文件资料

说明:下载图片和文档资料是两种不同的方式,所以需要先判断下载的是图片还是word,excel等文件资料

目录

1.文件资料下载:

2.图片资源下载


1.文件资料下载:

复制代码
window.location.href = '文件路径';

handleClick(item) {
  let fileSrc = `../../../data/${item.filepath}/${item.xzfilename}`;
  let filename = item.filename;
  let imgtype = ['png','jpg','jpeg','PNG','JPG','JPEG'];
  if(imgtype.indexOf(item.filename.split('.')[1]) != -1){
    debugger;
    //图片类型下载方式
    this.saveFileImg(fileSrc,filename);
  }else{
    debugger;
    //文档类型
    window.location.href = fileSrc;
  }
},

2.图片资源下载

复制代码
saveFileImg(data,filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
},
相关推荐
且白12 分钟前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研13 分钟前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
开发者工具分享32 分钟前
如何应对敏捷转型中的团队阻力
开发语言
疯狂的沙粒34 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
gregmankiw38 分钟前
C#调用Rust动态链接库DLL的案例
开发语言·rust·c#
siwangqishiq238 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli40 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i40 分钟前
HTML5 拖放 API
前端·html
roman_日积跬步-终至千里1 小时前
【Go语言基础【20】】Go的包与工程
开发语言·后端·golang
xiaominlaopodaren1 小时前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript