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);
},
相关推荐
汪子熙8 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪21 分钟前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九28 分钟前
html、css(javaweb第一天)
前端·css·html
黄雪超33 分钟前
JVM——对象模型:JVM对象的内部机制和存在方式是怎样的?
java·开发语言·jvm
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿1 小时前
《开篇:课程目录》
前端·c#
爱学习的capoo1 小时前
matlab自控仿真【第一弹】❀传递函数和输出时域表达式
开发语言·matlab
秋田君1 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
EverBule1 小时前
Python 训练 day46
开发语言·python
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js