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);
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/279487.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【黑产攻防道04】利用pow工作量证明降低黑产的破解效率

上一期我们提到,黑产有三种常见的破解方式: 1.通过识别出验证码图片答案实现批量破解验证,即图片答案识别; 2.在了解通讯流程之后直接携带相关参数发请求,即协议破解; 3.使用各种客户端模拟器来模拟真人…

在Linux上搭建Maven仓库的实战教程

引言 在Java开发中,Maven作为项目构建和依赖管理的重要工具,其仓库的搭建至关重要。本文将手把手教你如何在Linux系统上安装并配置Nexus Repository Manager 3(简称Nexus 3),从而创建一个私有的Maven仓库。 步骤一&a…

Vue小练习--任务列表

这是一个非常实用的例子,主要实用的是v-model、v-on、v-for指令,javaScript的数组也会涉及一些,javaScript数组方法有很多,本文使用的添加元素和删除元素非常实用,可以记下来。 设计思路 很多例子看起来很难&#xf…

代码随想录刷题 | Day1

今日学习目标 一、基础 数组 array类 模板类vector 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的 而且大家如果使用C的话&…

【华为数据之道学习笔记】7-5通过感知能力推进企业业务数字化

感知数据在华为信息架构中的位置 感知可以应用于广泛的物理世界和数字世界,感知范围可以从人、物、作业、地点扩展到复杂环境。成熟的用例倾向于以物和人为中心。而在企业中,只有将感知数据纳入整体的数据体系中,才能发挥感知数据的价值。 华…

javaWeb学生信息管理系统2

一、学生信息管理系统SIMS 一款基于纯Servlet技术开发的学生信息管理系统(SIMS),在设计中没有采用SpringMVC和Spring Boot等框架。系统完全依赖于Servlet来处理HTTP请求和管理学生信息,实现了信息的有效存储、检索和更新&#xf…

【eclipse】eclipse开发springboot项目使用入门

下载eclipse Eclipse downloads - Select a mirror | The Eclipse Foundation 安装eclipse 其他一步一步即可 我们是开发java web选择如下 界面修改 Window->Preferences-> 修改eclipse风格主题 Window->Preferences->General->Appearance 修改字体和大小…

Docker 入门 ------容器互通以及Dockerfile

1. 端口映射以及容器互联 Docker 除了通过网络访问,还提供了两种很方便的功能来满足服务访问的基本需求: 允许映射容器内应用的服务端口到本地宿主主机互联机制实现多个容器间通过容器名来快速访问 1.1 容器映射实现访问容器 1.1.1 从外部访问容器应…

一文了解无线通信 - NB-IOT、LoRa

NB-IOT、LoRa 目录概述需求: 设计思路实现思路分析 NB-IOT1.LoRa2.区别 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for change,chall…

磁盘阵列raid

一、服务器硬件 cpu 、 主板 、内存、硬盘、网卡、电源、raid卡、风扇、远程管理卡 二、硬盘尺寸 目前生产环境中主流的两种类型硬盘 3.5寸 和 2.5寸 硬盘 2.5寸硬盘可以通过使用硬盘托架后适用于3.5寸硬盘的服务器,但是3.5寸没法转换成2.5寸 1.如何在服务器上…

暗光增强——URetinex-Net网络推理测试

目录 一、URetinex-Net网络二、源码包三、测试3.1 修改参数3.2 测试结果 四、推理速度五、总结 一、URetinex-Net网络 URetinex-Net 设计了三个基于学习的模块,分别负责数据相关的初始化、高效的展开优化和用户指定的光照增强。由于 URetinex-Net 的推理速度非常快…

大语言模型(LLM)框架及微调 (Fine Tuning)

大语言模型(LLM) 技术作为人工智能领域的一项重要创 新在今年引起了广泛的关注。 LLM 是利用深度学习和大数据训练的人工智能系统,专门 设计来理解、生成和回应自然语言。这些模型通过分析大量 的文本数据来学习语言的结构和用法,…

初识隧道代理HTTP:理解基础概念的重要性

嗨,小伙伴们!如果你对网络世界充满好奇,那么这篇文章就是为你准备的。我们将一起踏上一段奇妙的旅程,探索一个叫做“隧道代理HTTP”的新领域。但在这之前,我们需要先穿上“基础概念”的防护服,以免被这个复…

Ubuntu22.04 安装教程

系统下载 Ubuntu官网下载 清华源镜像 安装流程 1. 选择安装语言 2. 选择是否在安装时更新 为了系统安装速度一般选择安装时不更新,安装后自行更新 3. 选择系统语言和键盘布局 4. 选择安装模式 5. 配置网络信息 6. 设置静态IP 7. 配置代理信息 8. 配置Ubuntu镜像…

【c/c++】指针例图基础详解

文章目录 指针变量内存指针详解例1例2练习&答案解析 指针变量内存 int main(){// 各类型变量占字节数printf("char: %d\n",sizeof(char)); // 1printf("short: %d\n",sizeof(short)); // 2printf("int: %d\n",sizeof(int)); // 4pri…

【Linux系统化学习】进程终止的奥秘

个人主页点击直达:小白不是程序媛 Linux专栏:Liunx系统化学习 代码仓库:Gitee 目录 获取函数返回值 退出码 进程退出的场景 错误码 信号终止异常代码 进程的终止 main函数直接return exit函数 _exit函数 获取函数返回值 在C语言学…

用anaconda下载安装pytorch1.8.2+cudatoolkit11.1

用anaconda下载安装pytorch1.8.1cudatoolkit11.1 设置清华镜像下载: conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda con…

【Linux】chage命令使用

chage命令 chage用来更改linux用户密码到期信息,包括密码修改间隔最短、最长日期、密码失效时间等。 语法 chage [参数] 用户名 chage命令 -Linux手册页 选项及作用 执行令 : chage --help 执行命令结果 参数 -d, --lastday 最近日期 …

Python圣诞树代码

Python圣诞树代码 # 小黄 2023/12/25import turtle as t # as就是取个别名,后续调用的t都是turtle from turtle import * import random as rn 100.0speed(20) # 定义速度 pensize(5) # 画笔宽度 screensize(800, 800, bgblack) # 定义背景颜色,可…

WPF 显示气泡提示框

气泡提示框应用举例 有时候在我们开发的软件经常会遇到需要提示用户的地方,为了让用户更直观,快速了解提示信息,使用简洁、好看又方便的气泡提示框显得更加方便,更具人性化。如下面例子:(当用户未输入账号时&#xff0…