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

下载文件，浏览器阻止不安全下载

news 来源：原创 2025/6/8 18:11:11

背景：

在项目开发中，遇到需要下载文件的情况，文件类型可能是图片、excell表、pdf、zip等文件类型，但浏览器会阻止不安全的下载链接。

效果展示：

下载文件的两种方式：

一、根据接口的相对url，拼接成完整路径下载

这串完整的下载路径是：

开发预留

在浏览器访问，图片如下：

结果分析：

直接在浏览器就可以直接访问，可见这个文件没有加密，是不安全的。

还有一个原因是实际情况，根据接口的url直接下载的。另外一种导出下载，是发起网络请求的，接收后台传给前端的二进制流之前需要先设置responseType为blob，否则默认会以json获取，下载下来的文件打开会提示文件已损坏。是发起网络请求的，并且后端接口返回的response头的content-type也是对应的类型，我的这里是application/vnd.ms-excel;charset=UTF-8。

二、网络接口，导出excell表格

实现效果：

导出接口：

这个接口返回的数据在控制台打印：

备注：控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。

实现思路【重点】：

导出接口传参给后端，后端对请求到的数据经过后端拼接，然后输出二进制流文件，然后给前端返回，前端直接下载。

需要注意几点：

1.前端请求需要携带请求体，config里面要带上responseType: 'blob'。举例：

//导出文件【渡船管理】

exportCrewInfoFile(params) {

return request.Get("/data/ferryShip/download?", params, {

headers: {

"Content-Type": "application/json",

},

responseType: 'blob',

});

},

所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob，否则默认会以json获取，下载下来的文件打开会提示文件已损坏。

2.后端最好也要配置response头的content-type为对应的类型。

3.需要给这个Blob对象设置一个type，这个type表明改Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如：type: "application/vnd.ms-excel",

/**

*

* @param {*} res 接口返回的文件流

*/

export const dowloadFileUrl = (res) => {

console.log(res)

const fileNames = res.headers['content-disposition']

if (fileNames) {

//解码

const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])

// 处理返回的文件流

const content = res.data

const blob = new Blob([content], {

// type: res.data.type||"application/vnd.ms-excel",

type: res.data.type||"application/octet-stream; charset=utf-8"

});

if ('download' in document.createElement('a')) {

//非IE下载

const a = document.createElement('a') //创建一个a标签

a.download = fileName //指定文件名称

a.style.display = 'none' //页面隐藏

a.href = URL.createObjectURL(blob) // href用于下载地址

document.body.appendChild(a) //插到页面上

a.click() //通过点击触发

URL.revokeObjectURL(a.href) //释放URL 对象

document.body.removeChild(a) //删掉a标签

} else {

//IE10 + 下载

navigator.msSaveBlob(blob, fileName)

}

}

}

三、下载文件的两种方式的对比

实现代码：

代码1：

    if (!data.file) {ElMessage.error("文件不存在！");return;}const url = BASEUrl + "/file/" + data.file;//拼接下载地址const a = document.createElement("a"); //创建一个a标签a.download = data.name; //指定文件名称a.style.display = "none"; //页面隐藏a.href = url; // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签

代码2：

/**** @param {*} fileContent 文件本体* @param {*} _fileName 自定义文件名*/
export const exportFileUtil = (fileContent, _fileName) => {const content = fileContent;const blob = new Blob([content], {type: fileContent.type || "application/octet-stream; charset=utf-8",});const fileName = _fileName;if ("download" in document.createElement("a")) {//非IE下载const a = document.createElement("a"); //创建一个a标签a.download = fileName; //指定文件名称a.style.display = "none"; //页面隐藏a.href = URL.createObjectURL(blob); // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签} else {//IE10 + 下载navigator.msSaveBlob(blob, fileName);}
};
/*** * @param {*} res 接口返回的文件流*/
export const dowloadFileUrl = (res) => {console.log(res)const fileNames = res.headers['content-disposition']if (fileNames) {//解码const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])// 处理返回的文件流const content = res.dataconst blob = new Blob([content], {// type: res.data.type||"application/vnd.ms-excel",type: res.data.type||"application/octet-stream; charset=utf-8"});if ('download' in document.createElement('a')) {//非IE下载const a = document.createElement('a') //创建一个a标签a.download = fileName //指定文件名称a.style.display = 'none' //页面隐藏a.href = URL.createObjectURL(blob) // href用于下载地址document.body.appendChild(a) //插到页面上a.click() //通过点击触发URL.revokeObjectURL(a.href) //释放URL 对象document.body.removeChild(a) //删掉a标签} else {//IE10 + 下载navigator.msSaveBlob(blob, fileName)}}
}

总结：

直接拼接url为下载路径，创建一个a标签触发下载；

导出接口通过接口返回的二进制流，经过出来二进制流为Blob且type类型与接口一致。

三、补充理论知识

MIME类型是什么：点击访问

MIME类型有哪些：点击访问

常见MIME【媒体类型】，如下：

扩展名----------MIME类型

　　.csv--------------text/csv

　　.jpeg/.jpg-------image/jpeg

　　.png-------------image/png

　　.rar--------------application/x-rar-compressed

　　.doc-------------application/msword

　　.docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document

　　.xls--------------application/vnd.ms-excel

.xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

　　.zip--------------application/zip

下载文件，浏览器阻止不安全下载

背景： 在项目开发中，遇到需要下载文件的情况，文件类型可能是图片、excell表、pdf、zip等文件类型，但浏览器会阻止不安全的下载链接。效果展示： 下载文件的两种方式： 一、根据接口的相对url，拼…...

编程日记 2025/6/4 8:42:53

1.15学习

web ctfhub-网站源码打开环境，查看源代码无任何作用，但是其提醒就在表面暗示我们用dirsearch进行目录扫描，登录kali的root端，利用终端输入dirsearch -u 网址的命令扫描该网址目录，扫描成功后获得信息，在…...

编程日记 2025/6/1 23:55:49

shell练习2

需求：判断192.168.1.0/24网络中，当前在线的ip有哪些，并编写脚本打印出来。 #!/bin/bashnmap -sn 192.168.1.0/24 | grep Nmap scan report for | awk {print $5} 注意：当运行 bash ip.sh 时出现 nmap: command not found 的错误…...

编程日记 2025/6/4 8:43:09

MySQL学习笔记5【SQL优化/视图/存储过程/触发器】

MySQL学习笔记 SQL优化 1. 插入数据优化普通插入： 采用批量插入： 每次插入不建议超过1000条记录，这样可以减少事务开销，提高性能。示例： INSERT INTO tb_user (name, age) VALUES (Alice, 25), (Bob, 30), ...;手动提…...

编程日记 2025/6/1 14:05:30

C++单例模式的设计

单例模式（Singleton Pattern）是一种设计模式，用于确保一个类只有一个实例，并提供一个全局访问点来访问该实例。在C中，单例模式通常用于管理全局资源或共享状态。以下是C中实现单例模式的几种常见方式： 懒…...

编程日记 2025/6/4 15:14:44

【Linux系统编程】—— 自动化构建工具Makefile指南

文章目录背景基本使用推导过程适度扩展语法背景 Makefile 是衡量开发者是否具备完成大型工程能力的一个重要标志。在一个工程中，源文件的数量可能极多，这些文件会按照类型、功能或模块分布在多个目录中。Makefile 通过定义一系列规则，指定…...

编程日记 2025/5/30 18:14:56

【SpringBoot应用篇】SpringBoot+MDC+自定义Filter操作traceId实现日志链路追踪

【SpringBoot应用篇】SpringBootMDC自定义Filter操作traceId实现日志链路追踪解决的问题解决方案MDC具体逻辑ymllogback-spring.xmlTraceIdUtil操作工具类TraceIdFilter自定义过滤器GlobalExceptionHandler全局异常处理类TraceIdAspect切面UserController测试验证多线程处理M…...

编程日记 2025/6/3 7:08:39

少一点If/Else - 状态模式（State Pattern）

状态模式（State Pattern） 状态模式（State Pattern）状态模式（State Pattern）概述状态模式（State Pattern）结构图状态模式（State Pattern）涉及的角色 talk is c…...

编程日记 2025/5/31 18:59:59

【SVN】版本发布快捷操作

摘要：因为每次发版都需要制作一份相同的文件夹，而大部分的包都不需要变更，但是文件又非常大，记录自己的操作经验。首先在SVN Repository Browser 界面把上一次的版本复制一份，复制的时候重命名为新的版本号右击要复…...

编程日记 2025/6/4 6:15:02

nacos环境搭建以及SpringCloudAlibaba脚手架启动环境映射开发程序

1：下载nacos 地址：https://github.com/alibaba/nacos/tags 2:选择server的zip包下载 3:启动mysql服务，新建数据库：nacos_yh 4：解压下载的nacos_server 进入conf目录 5：mysql运行sql脚本变得到下面的表 6&a…...

编程日记 2025/5/31 9:58:50

【笔记整理】记录参加骁龙AIPC开发者技术沙龙的笔记

AIoT 首先了解了一个概念叫AIoT，我的理解就是AI IoT 5G，通过AI的发展使得边缘计算、数据整合和处理变得快捷方便，不仅限于传统的云端数据处理，在边缘的IoT设备上也可以进行智能化打造，通过5G的通信能力扩展可以实现…...

编程日记 2025/6/2 1:57:17

Kotlin 协程基础十 —— 协作、互斥锁与共享变量

Kotlin 协程基础系列： Kotlin 协程基础一 —— 总体知识概述 Kotlin 协程基础二 —— 结构化并发（一） Kotlin 协程基础三 —— 结构化并发（二） Kotlin 协程基础四 —— CoroutineScope 与 CoroutineContext Kotlin 协程…...

编程日记 2025/6/2 12:02:16

DAMA CDGA 备考笔记（二）

1. 考点分布 2. 第二章数据处理伦理知识点总结伦理是建立在是非观念上的行为准则。伦理准则通常侧重于公平、尊重、责任、诚信、质量、可靠性、透明度和信任等方面。数据伦理是一项社会责任问题不是法律问题。度量指标：培训员工人数、合规/不合规事件、企业高管…...

编程日记 2025/5/31 9:15:43

【Lua学习之旅】之单行/多行注释

Lua的注释单行注释多行注释单行注释 lua中的单行注释采用两个短横线"--" --这是lua单行注释多行注释写法一： --[[ 这个lua的多行注释， 很多资料说多行注释不可以嵌套， 根据我的测试，这种写法的多行注释在lua54版…...

编程日记 2025/6/2 3:44:34

d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1,i2,⋯,in∑(−1)σ(i1,⋯,in)a1…...

编程日记 2025/5/31 8:31:01

react中hooks之useEffect 用法总结

1. 什么是函数的副作用（Side Effects） 副作用是指在组件渲染过程中，除了返回 JSX 之外的其他操作，例如： 数据获取（API 调用）订阅数据源手动修改 DOM设置定时器存储数据日志记录纯函数是特定的…...

编程日记 2025/6/2 18:30:12

小型、中型无人机执照学习和考试区别详解

小型、中型无人机执照的学习和考试在多个方面存在区别。以下是对两者的详细对比： 一、定义与适用范围 1. 小型无人机： 通常指起飞重量在7kg至25kg之间的无人机。适用于多种应用场景，包括商业飞行、航拍、农业植保等。必须持有民航局无人…...

编程日记 2025/6/4 6:43:55

【Go】Go Gin框架初识（一）

1. 什么是Gin框架 Gin框架：是一个由 Golang 语言开发的 web 框架，能够极大提高开发 web 应用的效率！ 1.1 什么是web框架 web框架体系图（前后端不分离）如下图所示： 从上图中我们可以发现一个Web框架最重要…...

编程日记 2025/5/31 1:29:18

计算机网络的五层协议

计算机网络的五层协议 ‌计算机网络的五层协议模型包括物理层、数据链路层、网络层、传输层和应用层，每一层都有其特定的功能和相关的协议。‌‌1 ‌物理层‌：负责传输原始的比特流，通过线路（有线或无线）将数据转换为…...

编程日记 2025/6/3 15:14:05

QT中，在子线程中更新UI，会出现哪些问题，如何避免这种情况发生。

在Qt中，直接从子线程更新UI（用户界面）通常会导致各种问题，主要是因为Qt的UI组件（如QWidget及其子类）并不是线程安全的。具体来说，可能会出现以下问题： 崩溃和未定义行为：…...

编程日记 2025/6/2 9:38:56

C++并发编程之多线程环境下使用无锁数据结构的重要准则

在多线程环境中使用无锁数据结构（Lock-Free Data Structures）能够显著提高程序的并发性能，因为它们避免了传统锁机制带来的竞争和阻塞问题。然而，无锁编程本身也带来了许多挑战，如内存管理、数据一致性和正确性等问题。…...

编程日记 2025/6/3 4:29:42

Vue篇-07

Vue UI组件库一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装： 按需引入： 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…...

编程日记 2025/6/4 7:32:46

Zookeeper 数据迁移实战：基础环境搭建与高效迁移方案全览

文章目录一、Zookeeper数据迁移简介二、迁移zookeeper数据基础环境三、利用快照迁移zookeeper数据1、Node1最新的zk快照文件和日志文件2、将被迁移方node2的zookeeper的集群全部stop3、将源node1集群数据和日志拷贝到指定目录下4、验证优先启动拷贝的数据、日志的zookeeper节点…...

编程日记 2025/6/2 16:26:17

内联变量（inline variables）：在多个文件中共享全局常量

在 C17 中，引入了内联变量（inline variables） 的概念，可以用于在多个文件中共享全局常量。内联变量允许在头文件中定义变量，而不会导致链接错误（如重复定义）。这种方式非常适合用于定义跨多个文…...

编程日记 2025/6/2 2:58:30

WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测

WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测目录 WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测预测效果基本介绍程序设计参考资料预测效果基本介绍基于WOA-CNN-LSTM-A…...

编程日记 2025/6/1 19:54:30

【kubernetes】K8S节点状态的维护

1 节点状态节点是K8S集群中的一类重要资源，节点的状态通常可以作为判断集群异常的重要手段。为了展示节点在各方面的健康程度，在kubectl describe node k8s-master的输出结果中的Conditions部分可以查看k8s-master节点的一些状态数据： N…...

编程日记 2025/6/2 23:07:04

工业视觉2-相机选型

工业视觉2-相机选型一、按芯片类型二、按传感器结构特征三、按扫描方式四、按分辨率大小五、按输出信号六、按输出色彩接口类型这张图片对工业相机的分类方式进行了总结，具体如下： 一、按芯片类型 CCD相机：采用电荷耦合器件（CC…...

编程日记 2025/6/2 4:50:33

Oracle查询-in条件超过1000

目录 1.不分页 2.分页 oracle数据库中，in的查询条件超过1000的话，就会报错，应该怎样处理这样的情况呢？ 1.不分页把查询条件分成几个list，每个list有1000个数据，有几个list查询几次数据库就行了 2.分…...

编程日记 2025/6/2 15:58:25

使用rknn进行retinaface部署（C++）

文章目录 RetinaFace导出ONNX导出RKNN编译运行学生课堂开源数据集RetinaFace RetinaFace是一种基于深度学习的高性能人脸检测方法，由InsightFace团队提出。它的核心思想是在单阶段检测器（如RetinaNet）的基础上，结合多任务学习来实现精确的人脸检测和特征点定位。以下是Ret…...

编程日记 2025/6/2 23:05:59

微服务拆分

微服务拆分接下来，我们就一起将黑马商城这个单体项目拆分为微服务项目，并解决其中出现的各种问题。熟悉黑马商城首先，我们需要熟悉黑马商城项目的基本结构： 大家可以直接启动该项目，测试效果。不过&#xff0c…...

编程日记 2025/6/2 20:05:06

【matlab】matlab知识点及HTTP、TCP通信

1、矩阵运算点乘：对于两个同维度的向量，点乘结果是这两个向量对应分量的乘积之和。点除：是指对两个数组的对应元素进行除法运算。点幂：表示元素对元素的幂运算。 >> A[1,2,3;4,5,6]; B[1,1,1;2,2,2]>> D1B.*AD…...

编程日记 2025/6/2 23:06:47

亿道三防丨三防笔记本是什么意思？和普通笔记本的优势在哪里？

三防笔记本是什么意思？和普通笔记本的优势在哪里？ 在现代社会中，笔记本电脑已经成为人们工作和生活中不可或缺的一部分。然而，在一些特殊行业或环境中，普通笔记本电脑由于其脆弱性和对环境条件的敏感性，往…...

编程日记 2025/6/1 10:35:13

C++并发编程之并发可扩展性与阿姆达尔定律

在C并发编程中，可扩展性和阿姆达尔定律（Amdahl’s Law）是两个非常重要的概念，它们帮助我们理解和优化并发程序的性能。下面我们分别讨论这两个概念，并探讨它们在C并发编程中的应用。可扩展性可扩展性（S…...

编程日记 2025/6/2 23:06:31

java 迪米特法则，原理、思想、工作流程、实现细节、稳定性、优缺点、应用场景等

迪米特法则（Law of Demeter，LoD），也被称为“最少知识原则”，是一种指导面向对象设计的原则，旨在减少对象之间的耦合度。以下是对迪米特法则的详细解析。 1. 定义迪米特法则指出：一个对象应该…...

编程日记 2025/6/3 14:19:49

使用 Docker 部署 Java 项目（通俗易懂）

目录 1、下载与配置 Docker 1.1 docker下载（这里使用的是Ubuntu，Centos命令可能有不同） 1.2 配置 Docker 代理对象 2、打包当前 Java 项目 3、进行编写 DockerFile，并将对应文件传输到 Linux 中 3.1 编写 dockerfile 文件 …...

编程日记 2025/6/3 14:19:30

DuckDB：精通Insert语句处理数据冲突

本文介绍DuckDB insert语句用法，包括常规的批量插入，尤其是插入数据冲突的处理，最后还提及returning子句的用法，每个用法提供示例说明。 insert插入数据 INSERT INTO向表中插入新行。可以插入由值表达式指定的一行或多行&#xf…...

编程日记 2025/6/3 14:22:01

DFT可测性设置与Tetramax测试笔记

1 DFT 1.1 DFT类型 1、扫描链（SCAN）： 扫描路径法是一种针对时序电路芯片的DFT方案.其基本原理是时序电路可以模型化为一个组合电路网络和带触发器(Flip-Flop，简称FF)的时序电路网络的反馈。 Scan 包括两个步骤，scan…...

编程日记 2025/6/3 14:21:11

AttributeError: Unknown IMAP4 command: ‘idle‘

imaplib 原生并不支持 IDLE 命令，这可能导致 AttributeError: Unknown IMAP4 command: idle 错误。解决办法是使用支持 IDLE 命令的库，例如 imapclient，或者通过扩展 imaplib 的方式实现。以下是两种解决方案： 方法 1&#xff1…...

编程日记 2025/6/3 14:21:44

css实现响应式详解

一、媒体查询（Media Queries） 基本概念媒体查询是 CSS3 中用于根据不同的设备特性（如屏幕宽度、高度、设备类型等）应用不同样式规则的技术。它允许你为特定的媒体类型（如屏幕、打印、手持设备等）和条件&a…...

编程日记 2025/6/2 23:42:09

hot100_240. 搜索二维矩阵 II

hot100_240. 搜索二维矩阵 II 直接遍历列减行增编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性： 每行的元素从左到右升序排列。每列的元素从上到下升序排列。示例 1： 输入：matrix [[1,4,7,1…...

编程日记 2025/6/2 17:16:26

【网络云SRE运维开发】2025第3周-每日【2025/01/15】小测-【第14章ospf高级配置】理论和实操解析

文章目录 14.1 选择题解题思路和参考答案14.2 理论题解题思路和参考答案14.3 实操题解题思路和参考答案思科（Cisco）设备华为（Huawei）设备小米/锐捷（或其他支持标准CLI命令的设备）通过网络管理工具注意事项 …...

编程日记 2025/6/3 14:21:28

c#-Halcon入门教程——标定

Halcon代码 read_image (NinePointCalibration, D:/Desktop/halcon/ca74d-main/九点标定/NinePointCalibration.gif)rgb1_to_gray (NinePointCalibration, GrayImage)get_image_size (GrayImage, Width, Height) dev_display (GrayImage)* 获取当前显示的窗口句柄 dev_get_win…...

编程日记 2025/6/3 14:20:21

设计和优化用于 AR、HUD 和高级显示系统的表面浮雕光栅

表面浮雕光栅是许多光学系统中的关键组件，在控制增强现实 （AR） 显示器、平视显示器 （HUD） 和其他先进光子器件中的光传播方面发挥着关键作用。作为在这个领域工作的工程师和设计师，您了解针对特定应用优化这…...

编程日记 2025/6/3 14:20:55

编译pytorch——cuda-toolkit-nvcc

链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…...

编程日记 2025/6/3 10:03:06

背景：