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

news2025/1/23 7:23:29

说明:下载图片和文档资料是两种不同的方式,所以需要先判断下载的是图片还是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.coloradmin.cn/o/1344112.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

S32K312程序快速集成软件看门狗的方法

S32K312的软件看门狗配置比较复杂,如果靠纯手工在外设中进行配置,非常费时间,还不一定好用。 想要快速使用S32K312的软件看门狗,我探索一翻后做了总结: 1、先创建一个官方的示例代码工程(Wdg_Example_S32K…

世界经济论坛制定了五项指导原则,实现跨OT环境的网络安全。

内容概述: 世界经济论坛在其题为“解锁工业环境中的网络弹性:五项原则”的报告中列出:原则一:执行全面风险管理OT 环境、原则二:确保OT工程师和安装操作员对OT网络安全负责、原则三:与高层组织领导、战略规…

一文了解无线通信 - 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…

main 函数参数!它们有什么作用?

文章目录 1 主函数定义的标准方式2 为什么main函数需要参数?3 不写参数是否可以?4 两个参数有什么用?5 怎么用?6 总结 1 主函数定义的标准方式 int main (void) { body } //第一种 int main (int argc, char *argv[]) { body …

矩阵微分笔记(2)

目录 前言基本求导规则1. 向量变元的实值标量函数1.1 4个法则1.2 常用公式 2. 矩阵变元的实值标量函数2.1 4个法则2.2 常用公式 参考 前言 这篇笔记的内容是基于参考的文章写出的,公式部分可以会沿用文章本来的式,但会加入我自己的一些思考以及注释&…

Spring-6-事务管理

事务是构建可靠企业级应用程序的最关键部分之一。 最常见的事务类型是数据库操作。 在典型的数据库更新操作中,首先数据库事务开始,然后数据被更新,最后提交或回滚事务(根据数据库操作的结果而定)。但是,在很多情况下&#xff0…

【目标检测】yolov8结构及代码分析

yolov8代码:https://github.com/ultralytics/ultralytics yolov8的整体结构如下图(来自mmyolo): yolov8的配置文件: # Ultralytics YOLO 🚀, AGPL-3.0 license # YOLOv8 object detection model with P3-P5 outputs.…

main参数传递、反汇编、汇编混合编程

week03 一、main参数传递二、反汇编三、汇编混合编程 一、main参数传递 参考 http://www.cnblogs.com/rocedu/p/6766748.html#SECCLA 在Linux下完成“求命令行传入整数参数的和” 注意C中main: int main(int argc, char *argv[]), 字符串“12” 转为12,可以调用atoi…

简单了解SQL宽字节注入与httpXFF头注入(基于sqllabs演示)

1、宽字节注入 sqllabs-less-32为例 使用单引号进行测试 提示我们输入的单引号被转义符 \ 进行了转义,即转义符自动的出现在输入的特殊字符前面,这是防止sql注入的一种方法,导致无法产生报错。 这种情况我们就可以尝试宽字节注入&#xff…

R503S指纹识别模块的指令系统(二)

18 获取随机数 GetRandomCode(0x14) 功能说明:令模块生成一个随机数返回给上位机 输入参数:无 返回参数:确认码 RandomCode(随机数) 指令代码:0x14 确认码0x00 表示获取成功&…

YOLOv8改进 | 主干篇 | EfficientNetV1均衡缩放网络改进特征提取层

一、本文介绍 这次给大家带来的改进机制是EfficientNetV1主干,用其替换我们YOLOv8的特征提取网络,其主要思想是通过均衡地缩放网络的深度、宽度和分辨率,以提高卷积神经网络的性能。这种方法采用了一个简单但有效的复合系数,统一…

68.乐理基础-打拍子-大附点与变体

上一节内容:66.乐理基础-打拍子-小切分-CSDN博客,只所以没有67因为67可以不用知道,67节内容在:※-打拍子(8)-一拍内的变体1-乐理教程-腾讯课堂 (qq.com) 大附点:大附点这个名字不是通用的&…

通过AWS Endpoints从内网访问S3

AWS S3作为非结构化数据的存储,经常会有内网中的app调用的需求。S3默认是走公网访问的,如果内网app通过公网地址访问S3并获取数据会消耗公网带宽费用。如下图所示: AWS 提供了一种叫做endpoints的资源,这种资源可以后挂S3服务&a…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的固定帧率(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的固定帧率(C#) Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在NEOAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过NEOAPI SDK设置相机固…

TSR勾画学习

1:勾画建议 文献:Scoring the tumor-stroma ratio in colon cancer: procedure and recommendations 主要讲述的是结肠癌(CRC)的勾画建议和流程。 1,切片选择建议: 原发肿瘤的载玻片最具侵袭性的部分(即常规病理学…

golang 图片加水印,字体文件从哪里找

鼠标左键双击此电脑图标在此电脑文本框输入电脑默认字体地址:C:\Windows\Fonts找到需要用到的字体文件,复制到指定文件夹

jQuery-Validate验证插件的使用步骤【详解】

jQuery-Validate验证插件的使用步骤详解 1. 写在前面2. 效果展示3. Validate环境的搭建4. Validate基本方法的使用5. 实现错误消息的本地化6. 实现远程验证7. 自定义验证方法8. 验证表单完整版8.1 Html表单8.2 表单验证js逻辑8.3 表单验证css样式 1. 写在前面 我们知道&#x…

如何编译代码,把RustDesk主页面背景白色改成自己想要的图片

环境: RustDesk1.1.9自建服务器 问题描述: 如何编译代码,把RustDesk主页面背景白色改成自己想要的图片 解决方案: 详细方案,有需要私聊

鸿蒙OS应用开发之气泡提示

前面学习了弹窗提示,其实有时候只是想在旁边做一些说明,那么采用弹窗的方式就比较麻烦一些,这时可以采用系统里面的气泡提示方式。 系统也提供了几种方式弹出气泡提示,最简单的一种是采用bindPopup属性。它的定义如下: 在后面的参数设置里,也是比较复杂的形式。我们先来演…

Live800:客户体验策略是什么?企业如何制定客户体验策略?

客户体验策略是企业为了提升顾客对产品或服务的感知和满意度而采取的一系列措施和方法。它关注的是如何创造一个积极、愉悦和有价值的购买过程,从而建立长期的客户关系和忠诚度。客户体验策略是企业成功的关键之一,因为它能够帮助企业在竞争激烈的市场中…