当前位置: 首页 > news >正文

a标签下载文件与解决浏览器默认打开某些格式文件的问题

前言 

        在实际项目中,我们通常会遇到这么一个需求:后端给前端返回一个任意文件类型的完整的url路径,前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的<a>标签,,因为<a>标签中提供download属性,使得流量拿起将链接url视为下载资源。

        然后我想记录此篇文章的主要原因是,在使用<a>标签下载文件时,由于浏览器默认行为,对于一些特殊格式的文件比如:txt,png,jpg等文件这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件。因此,本文主要先讲一下<a>下载文件的用法,后面也会给出对于特殊文件时浏览器直接打开的解决方式。

<a>元素介绍

<a>元素(或称锚元素),可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或者其他URL的超链接

属性

download

导致浏览器将链接URL视为下载资源。可以使用或不适用filename值:

  • 如果没有指定值,浏览器会从多个来源决定文件名和扩展名:
    • Content-Disposition HTTP标头
    • URL 路径的最后一段
    • 媒体类,来自Content-Type标头,data:URL的开头,或者blob:URL的Blob.type
  • filename:决定文件名的值。/和\被转换为下划线( _ )。文件系统可能会阻止文件名中其他的字符,因此浏览器会在必要时适当调整文件名。

href

超链接所指向的URL。链接不限于基于HTTP的URL------它们可以使用浏览器支持任何URL的协议:

  • 使用文档片段链接到页面的某一段
  • 使用文本片段链接到某一段文字
  • 使用媒体片段链接到某个媒体文件
  • 使用 tel: URL 链接到一个电话号码
  • 使用 mailto: URL 链接到一个邮箱地址
  • 如果 web 浏览器不能支持其他 URL 协议,网站可以使用 registerProtocolHandler()

target

该属性指定在何处显示链接URL,作为浏览器上下文的名称(标签、窗口或者<iframe>)。以下关键字对加载的URL的位置有特殊含义:

  • _self:当前页面加载(默认)
  • _blank:通常在新标签页打开,但用户可以通过配置选择在新窗口打开
  • _parent:当前浏览环境的父级浏览上下文。如果没有父级框架,行为与_self相同
  • _top:最顶级的浏览上下文(当前浏览上下文中最“高”的祖先),如果没有祖先,行为与_self相同。

我在这里主要介绍几个我常用到的属性,但是<a>还有很多其他属性,感兴趣的话可以在这里进行详细的了解<a>:锚元素 - HTML(超文本标记语言) | MDN

使用<a>元素下载文件遇到的问题

这里我要说明一下我使用<a>元素下载文件时遇到的问题:chrome浏览器中会打开支持预览的文件(比如前面提到的:txt,png,jpg等),而不是直接下载。然后我也看到一些人给出的方法是说给a标签加一个“download”属性,但是不知道为啥,我试了是不行的。

然后我又找到如下可以有效解决该问题的方式:

解决方式1:设置Content-type

chrome浏览器对与txt,json等文件直接打开应该是浏览器对这些类型的文件支持预览,可以设置Content-type:application/octet-stream来解决此问题,即告诉浏览器这是一个字节流,浏览器处理字节流的默认方式是下载,以下是我需要使用到的一些文件格式,并对其进行处理,还有很多其他文件格式,拼接的类型 会有所差别,可以详细查看这份:如何设置Content-Type(MIME)_对象存储 OSS-阿里云帮助中心

解决方法2:使用ajax请求该url,获取到文本内容,手动实现下载。

可以参开这个博主这篇文章:使用a标签下载文件,浏览器会直接打开解决方案_a标签下载图片会打开-CSDN博客

相关文章:

a标签下载文件与解决浏览器默认打开某些格式文件的问题

前言 在实际项目中&#xff0c;我们通常会遇到这么一个需求&#xff1a;后端给前端返回一个任意文件类型的完整的url路径&#xff0c;前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的<a>标签&#xff0c;&#xff0c;因为<a>…...

EasyCVR视频监控+AI智能分析网关如何助力木材厂安全生产?

旭帆科技有很多工厂的视频监管方案&#xff0c;小编也经常分享出来供大家参考。近期&#xff0c;又有伙伴后台私信我们想要关于木材厂的方案。针对木材厂的生产过程与特性以及安全风险等&#xff0c;我们来分享一下相关的监管方案&#xff1a; 1&#xff09;温湿度监测&#xf…...

重命名com1.{d3e34b21-9d75-101a-8c3d-00aa001a1652}文件夹

今天在win10系统上&#xff0c;发现一个名称为: com1.{d3e34b21-9d75-101a-8c3d-00aa001a1652} 的文件夹&#xff0c;该文件夹很奇怪&#xff0c;既不能手动删除&#xff0c;也不能手动给文件夹重命名&#xff0c;如图(1)所示&#xff1a; E:\EncodeOne\hello\Thumbs.ms\com1.…...

springboot+activiti5.22.0集成Activiti在线流程设计器

SpringBoot集成Activiti5.22在线流程设计器 文章目录 SpringBoot集成Activiti5.22在线流程设计器&#x1f4dd;1.增加配置pom依赖 增加数据库及redis配置文件&#x1f4dc; 2.启动类ActivitiDesignApplication排除安全校验注解启动项目后将会自动在数据库中生成表 &#x1f4d8…...

pdf如何让多张图片在一页

pdf保存为一页六张图片的方法是&#xff1a; 1、打开pdf查看器,打开文档。 2、点击【打印】图标进入打印程序&#xff0c;选择打印范围。 3、在【打印处理】选项,选择【每张张上放置多页】。 4、自定义每页放置的图片张数为六张&#xff0c;并对打印排版预览设置。 5、设置打印…...

【C语言_题库】输入4个整数,要求按照从小到大的顺序输出

题目 输入4个整数 要求按照从小到大的顺序输出 书上的学习辅导答案 // 主要部分 int main(){int t,a,b,c,d;printf("请输入四个数:");scanf("%d,%d,%d,%d"...

Cascade-MVSNet论文笔记

Cascade-MVSNet论文笔记 摘要1 立体匹配&#xff08;Stereo Matching&#xff09;2 多视图立体视觉&#xff08;Multi-View Stereo&#xff09;3 立体视觉和立体视觉的高分辨率输出4 代价体表达方式&#xff08;Cost volume Formulation&#xff09;4.1 多视图立体视觉的3D代价…...

Linux调试器---gdb的使用

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、gdb的背景 gdb&#xff0c;全称为GNU调试器&#xff08;GNU Debugger&#xff09;&#xff0c;是一个功能强大的源代码级调试工具&#xff0c;主要…...

【Dubbo】Dubbo负载均衡实现解析

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…...

怎样备份电脑文件比较安全

域智盾软件是一款功能强大的电脑监控软件&#xff0c;它不仅具备实时屏幕监控、行为审计等功能&#xff0c;还能够对电脑文件进行备份和管理。下面将介绍域智盾软件如何备份电脑文件&#xff0c;以确保数据安全。 1、开启文档备份功能 部署后台&#xff0c;然后点击文档安全&a…...

python 计算最大回撤

1. 什么是最大回撤 最大回撤是评估金融产品收益的一个非常重要的风险指标&#xff0c;它指的是在选定历史周期内任一历史时点往后推&#xff0c;产品净值走到最低点时的收益率回撤幅度的最大值。 以上图为例&#xff0c; 最大回撤 ( V a l u e A − V a l u e B ) V a l u e …...

Linux系统中常用的压缩与解压缩方法

目录 一.前言二.如何压缩与解压缩 一.前言 Linux系统中压缩和解压缩的方法很多&#xff0c;这篇文章只简单介绍一下使用tar和gzip进行压缩与解压缩。 二.如何压缩与解压缩 tar和gzip命令内容很多&#xff0c;这篇文章只是简单介绍一下。 1.看一下gzip命令压缩与解压缩方法。…...

目标检测YOLO实战应用案例100讲-基于机器视觉的水稻病虫害监测预警(续)

目录 3.3 试验结果与分析 3.3.1 数据集介绍 3.3.3 评价标准 3.3.4 模型训练参数设置...

【星海随笔】redis 解析

redis 非关系型数据库 支持事务&#xff0c;操作都是原子性 所谓的原子性就是对数据的更改要么全部执行&#xff0c;要么全部不执行。 redis-server&#xff1a;顾名思义&#xff0c;redis服务 redis-cli&#xff1a;redis client&#xff0c;提供一个redis客户端&#xff0c;…...

鸿蒙:实现两个Page页面跳转

效果展示 这篇博文在《鸿蒙&#xff1a;从0到“Hello Harmony”》基础上实现两个Page页面跳转 1.构建第一个页面 第一个页面就是“Hello Harmony”&#xff0c;把文件名和显示内容都改一下&#xff0c;改成“FirstPage”&#xff0c;再添加一个“Next”按钮。 Entry Compone…...

C#有关里氏替换原则的经典问题答疑

目录 理解创建类型与变量类型很关键 先来理解变量类型。 再来理解创建类型。 有了正确的理解再来看疑问 里氏替换原则是面向对象七大原则中最重要的原则。 语法表现&#xff1a;父类容器装子类对象。 namespace 里氏替换原则 {class GameObject { } class Player : GameO…...

【每日一题】689. 三个无重叠子数组的最大和-2023.11.19

题目&#xff1a; 689. 三个无重叠子数组的最大和 给你一个整数数组 nums 和一个整数 k &#xff0c;找出三个长度为 k 、互不重叠、且全部数字和&#xff08;3 * k 项&#xff09;最大的子数组&#xff0c;并返回这三个子数组。 以下标的数组形式返回结果&#xff0c;数组中…...

“开源 vs. 闭源:大模型的未来发展趋势预测“——探讨大模型未来的发展方向

文章目录 每日一句正能量前言什么是大模型的开源与闭源开源与闭源的定义和特点开源的意义开源和闭源的优劣势比较不同的大模型企业&#xff0c;开源、闭源的策略不尽相同。企业在开发垂类模型时选择开源还是闭源大模型开源vs 闭源&#xff1a;两者并非选择题后记 每日一句正能量…...

计算机网络——物理层-信道的极限容量(奈奎斯特公式、香农公式)

目录 介绍 奈氏准则 香农公式 介绍 信号在传输过程中&#xff0c;会受到各种因素的影响。 如图所示&#xff0c;这是一个数字信号。 当它通过实际的信道后&#xff0c;波形会产生失真&#xff1b;当失真不严重时&#xff0c;在输出端还可根据已失真的波形还原出发送的码元…...

【算法挨揍日记】day31——673. 最长递增子序列的个数、646. 最长数对链

673. 最长递增子序列的个数 673. 最长递增子序列的个数 题目解析&#xff1a; 给定一个未排序的整数数组 nums &#xff0c; 返回最长递增子序列的个数 。 注意 这个数列必须是 严格 递增的。 解题思路&#xff1a; 算法思路&#xff1a; 1. 状态表⽰&#xff1a; 先尝试…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...