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);
},
相关推荐
字节架构前端18 分钟前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨31 分钟前
关于CSS的一些读书笔记
前端·css
荷蒲34 分钟前
【小白量化智能体】应用5:编写通达信股票交易指标及生成QMT自动交易Python策略程序
开发语言·python
ljh57464911939 分钟前
PHP password_verify() 函数
开发语言·php
Poetry23739 分钟前
大屏数据可视化适配方案
前端
遂心_1 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
lovix121 小时前
java进阶(三):单例、工厂、模版方法与代理模式详解
java·开发语言
轻语呢喃1 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
用户3802258598241 小时前
vue3源码解析:watch的实现
前端·vue.js·源码