浏览器的下载行为基本原理

news2024/11/22 17:52:08

浏览器解析

在使用浏览器访问某些资源时,有些资源是直接下载有些资源是直接打开。例如前端的html,xml,css,图片等资源都是直接打开,而txt,excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还是打开文件呢?

浏览器展现的内容都是解析后端或者静态的类HTML文件,前端的都知道HTML构成浏览器的内容,CSS构成浏览器的样式,Javascript构成浏览器的行为,这些在后端都是一个个的文件,这些文件通过网络传递到浏览器会被浏览器解析出来构成用户看到的内容。

所以浏览器可以理解为一个解析多种文件的软件,主流浏览器支持解析如下的文件:

在这里插入图片描述

浏览器行为

在这里插入图片描述

常见的浏览器行为有上传,下载,预览,打开等。浏览器默认的行为是解析打开,有些时候需要开发者控制浏览器行为,来确定操作时打开开始下载等。浏览器定义了多种机制来应对文件,这些机制旨在适应不同的使用场景和用户偏好:

a标签指向文件地址

使用<a>标签的href属性指向文件的 URL,当用户点击该链接时,浏览器会触发一个文件行为。

a标签是跳转标签,如果跳转的文件是浏览可以直接解析的文件就会直接打开。如下三种文件的跳转:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <a href="./111.png">图片跳转</a>
        <a href="./111.txt">文本文件跳转</a>
        <a href="./111.xml">标签语言跳转</a>
    </body>

</html>

在这里插入图片描述

通过a标签连接的可解析的文件会被直接打开。如果是浏览器不能解析的文件呢,如下:在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <a href="./111.xlsx">excel表格文件</a>
        <a href="./111.docx">word文档文件</a>
    </body>

</html>

在这里插入图片描述

遇到这种不能解析的文件就会自动触发浏览器的下载功能。

<a>标签会把跳转的访问资源当成一个文件如果可以被解析就会打开,不能解析就会下载,a标签会直接暴露资源的地址,另外资源一般有两种协议file://https://

在这里插入图片描述
在这里插入图片描述
对于远程服务器来说都是https://协议。

<a>标签相对开放完全又浏览器控制,依照浏览器规则。

window.open()

<a>标签可知浏览器访问某个资源时会直接解析该资源,不能解析的会触发下载行为,window.open()具有相似的行为。

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <button type="button" onclick="downpng()">图片处理</button>
        <button type="button" onclick="downtxt()">txt处理</button>
        <button type="button" onclick="downxml()">xml</button>
        <button type="button" onclick="downdocx()">docx处理</button>
        <button type="button" onclick="downxlsx()">xlsx处理</button>
    </body>

    <script>
        function downpng(){
            console.log("render")
            window.open('./111.png')
        }
        function downtxt(){
            console.log("render")
            window.open('./111.txt')
        }
        function downxml(){
            console.log("render")
            window.open('./111.xml')
        }
        function downdocx(){
            console.log("render")
            window.open('./111.docx')
        }
        function downxlsx(){
            console.log("render")
            window.open('./111.xlsx')
        }
    </script>

</html>

在这里插入图片描述

Javascript调用DOM对象实现文件下载

JS调用dom的方式适用于用户输入数据生成文件的场景,此时文件并不存在,需要js生成。使用 JavaScript 动态创建一个 <a> 元素或修改现有元素的 href 和 download 属性,然后模拟点击事件来启动下载。

<html>
<body>
   <h3> Create the file from the custom text and allow users to download that file </h3>
   <p> Click the below button to download the file with custom text. </p>
   <input type = "text" id = "file_text" value = "Entetr some text here.">
   <button type = "button" onclick = "startDownload()"> Download </button>
</body>
   <script>
      function startDownload() {
         let user_input = document.getElementById('file_text');
         let texts = user_input.value;

         var hidden_a = document.createElement('a');

         hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8, '+ encodeURIComponent(texts));

         hidden_a.setAttribute('download', "text_file");
         document.body.appendChild(hidden_a);
         
         hidden_a.click();
         document.body.removeChild(hidden_a);
      }
   </script>
</html>

参考文档:如何在点击HTML按钮或JavaScript时触发文件下载

  1. hidden_a:这是一个HTML元素,是一个链接(<a>标签)。

  2. setAttribute:这是JavaScript中的一个方法,用于设置指定元素的属性值,

  3. href:这是要设置的属性名称,这里是href,通常用于定义超链接的目标URL。

  4. data:text/plain;charset=utf-8, '+ encodeURIComponent(texts):这是要设置的属性值。这里使用了data:协议来创建一个数据URL,该URL表示一段纯文本数据。text/plain表示数据类型是纯文本,charset=utf-8表示字符集是UTF-8。encodeURIComponent(texts)是对变量texts进行URL编码,以确保其可以安全地作为URL的一部分。

这段代码的作是动态创建一个包含texts变量内容的纯文本数据URL(使用data://表示构造数据),并将其赋给动态创建的a标签的href属性。

数据类型格式
图片image/jpeg
mp3video/mpeg
pdfapplication/pdf
纯文本(txt)text/plain

更多类型参考http文件下载 response响应ContentType与a标签download属性

Javascript模拟<a>标签

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"> </script>
</head>
<body>
   <button type = "button" onclick = "startDownload()"> Download </button>
</body>
   <script>
      async function startDownload() {
         // get data using axios
         let results = await axios({
            url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4gbghQxKQ00p3xIvyMBXBgGmChzLSh1VQId1oyhYrgir1bkn812dc1LwOgnajgWd-Yo&usqp=CAU',
            method: 'GET',
            responseType: 'blob'
         })
         let hidden_a = document.createElement('a');
         hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
         hidden_a.setAttribute('download', 'download_image.jpg');
         document.body.appendChild(hidden_a);
         hidden_a.click();
      }
   </script>
</html>

使用axios从URL中获取数据,将其转换为Blob对象,并将其设置为href属性的值,JavaScript中点击了<a>元素来触发文件下载。

下载总结

上述的4中方法其实都有一个共同之处就是均基于hrefdownload属性实现的。

处理任何文件需要经历如下步骤:

在这里插入图片描述

首先href属性必须是文件的Blob URL,另外需要获取文件的类型,从而决定了浏览器是直接打开还是下载。

  • 对于<a>标签和windows.open()来说指向的是文件的地址,从该地址获取文件的类型,策略同时获取文件的Blob数据流包装为Blob URL,这些操作被浏览器隐藏了,用户无法感知,可以通过devtools查看,在preview就是返回的流数据,只是可以被浏览器打开的数据会被解析预览,如果是excel等文件,就是一堆乱码了,应为excel不再默认解析范围内。

  • 对于通过Js实现的原理也是获取文件的字节流数据包装为Blob URL赋值给href属性,通过js行为实现下载。获取字节流Blob URL的方式有多种:(1)前端js编码用户输入数据,再构造Blob URL(这两步骤可以合并使用data://协议直接将数据构造为Blob URL);(2)使用xhr或者fetch获取接口的字节流数据,再将流数据构造为Blob URL。最后将URL赋值给href属性设置download行为通过js调用该行为即可实现下载。

由此可知不论什么数据在浏览器实现下载都是需要得到文件的字节流数据的,将文件的字节流数据构造为Blob URL类型并赋值给<a>标签的href属性,按需控制download属性就可以时间文件的下载。

对于直接赋值文件地址的这种下载,浏览器隐藏了构造Blob URL的步骤和细节,是一种较为方便和实用的下载方式,但是需要文件服务器。

构造Blob URL的两种方式:data://协议基于用户输入数据构建; JS构建数据来源任意。需要注意的是使用https协议获取的数据流需要在https响应头设置文件格式,用于解析数据。

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

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

相关文章

C# run Node.js

C# run nodejs Inter-Process Communication&#xff0c;IPC Process类 启动Node.js进程&#xff0c;通过标准输入输出与其进行通信。 // n.js// 监听来自标准输入的消息 process.stdin.on(data, function (data) {// 收到消息后&#xff0c;在控制台输出并回复消息console.l…

MyBatisPlus标准分页功能制作,以及设置分页拦截器,selectPage(new Page<>(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…

基于轻量级神经网络GhostNet开发构建CIFAR100数据集场景下的图像识别分析系统,对比不同分辨路尺度下模型的性能情况

Cifar100数据集是一个经典的图像分类数据集&#xff0c;常用于计算机视觉领域的研究和算法测试。以下是关于Cifar100数据集的详细介绍&#xff1a; 数据集构成&#xff1a;Cifar100数据集包含60000张训练图像和10000张测试图像。其中&#xff0c;训练图像分为100个类别&#x…

肯尼亚大坝决堤反思:强化大坝安全监测的必要性

一、背景介绍 近日&#xff0c;肯尼亚发生了一起严重的大坝决堤事件。当地时间4月29日&#xff0c;肯尼亚内罗毕以北的一座大坝决堤&#xff0c;冲毁房屋和车辆。当地官员称&#xff0c;事故遇难人数已升至71人。这起事件再次提醒我们&#xff0c;大坝安全无小事&#xff0c;监…

SpringMVC源码解读[1] -Spring MVC 环境搭建

源码地址: https://github.com/chen-jiacheng/springmvc-quickstart 一、使用 IDEA 创建 Spring MVC 项目 直接创建项目即可 默认项目结构: springmvc-quickstart ├── pom.xml └── src├── main│ ├── java│ │ └── com│ │ └── chenjiache…

微软开发者大会:编程进入自然语言时代、“AI员工”闪亮登场

当地时间周二&#xff0c;美国科技公司微软召开年度Build开发者大会。在CEO纳德拉的带领下&#xff0c;微软各个产品团队再一次展现出惊人的执行力&#xff0c;在发布会上又拿出了接近50个新产品或功能更新。 整场发布会持续了接近两个小时&#xff0c;在这里挑选了一些投资者…

深度学习之基于YoloV5入侵检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。入侵检测系统&#xff08;IDS&#xff0…

[图解]产品经理创新模式01物流变成信息流

1 00:00:01,570 --> 00:00:04,120 有了现状的业务序列图 2 00:00:04,960 --> 00:00:08,490 我们就来改进我们的业务序列图了 3 00:00:08,580 --> 00:00:11,010 把我们要做的系统放进去&#xff0c;改进它 4 00:00:13,470 --> 00:00:15,260 怎么改进&#xff1f;…

第五节 Starter 的加载全貌

tips&#xff1a;下载源码&#xff0c;再结合本章内容&#xff0c;学习整个加载过程。 上一章&#xff0c;我们理解了 spring.factories 的触发时机&#xff0c;但放在 SpringBoot 的整个加载过程来讲&#xff0c;只能算部分。 而这一章&#xff0c;将从 SpringBoot 的加载全貌…

Day 60 84.柱状图中最大的矩形

柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 1 < heights.length <10^50 < heights[i] < 10^4 ​ 这道题很明显&…

x264码率控制基础

x264码率控制模型 x264码率控制也是基于率失真模型即,D为失真,R为码率,为拉格朗日因子,当取值较大时,倾向于低码率高失真的情况;当取值较小时,倾向于高码率低失真的情况。由拉格朗日乘数法知, 参考[1], x264采用的是高码率下码率和失真之间的关系

数据结构和算法|排序算法系列(一)|选择排序

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.2 选择排序 选择排序是明显的基于比较的排序。下文开始阐述选择排序的整个算法流程 算法流程 选择排序应该已…

x264 码率控制原理:x264_ratecontrol_start 函数

x264_ratecontrol_start 函数 函数原理 函数功能:编码一帧之前,为当前帧选择一个量化 QP,属于帧级别码率控制;这对于控制视频质量和文件大小至关重要。通过调整QP,编码器可以在保持视频质量的同时,尽可能减小输出文件的大小。函数参数:x264_t *h: 编码器上下文结构体指…

贴片 RS8752XK 封装SOP-8 250MHz,2通道高速运放

传感器信号放大&#xff1a;在传感器应用中&#xff0c;RS8752XK可以用于放大微弱的传感信号&#xff0c;如压力、温度、光强等传感器的信号。 数据采集系统&#xff1a;在数据采集设备中&#xff0c;RS8752XK可以用于放大和调理模拟信号&#xff0c;以供模数转换器&#xff0…

abs(-2147483648) == 2147483648?

从数学意义上&#xff0c;这是对的。但是&#xff0c;就怕但是。 #include int main() {long long v;v abs(-2147483648);printf("%lld\n", v);return 0; } 输出: -2147483648 我们从source code中一一解开. /* Return the absolute value of I. */ int abs (…

Mist-开源macOS系统版本安装包管理工具

Mist 用于下载 macOS 系统安装包的工具&#xff0c;可下载macOS 固件 / 安装程序。 需要经常下载macOS的可以体验一下。 可以在底部选择显示 macOS 的 Beta 版本 筛选出与当前 Mac 兼容的 macOS 版本 想了解更多可访问项目地址&#xff1a; https://github.com/ninxsoft/Mis…

一文了解微服务

微服务架构是一种将应用程序划分为一组小型、独立的服务的方法&#xff0c;这些服务运行在自己的进程中&#xff0c;通常通过网络进行通信。微服务架构的主要优点是可以提高应用程序的灵活性和可扩展性&#xff0c;同时也使得开发、部署和维护更加容易。本文将介绍微服务架构的…

Redis实践—全国地址信息缓存

一、背景 在涉及全国地址的应用中&#xff0c;地址信息通常被频繁地查询和使用&#xff0c;例如电商平台、物流系统等。为了提高系统性能和减少对数据库的访问压力&#xff0c;可以使用缓存来存储常用的地址信息&#xff0c;其中 Redis 是一个非常流行的选择。 本次在一个企业入…