【项目实战】location.href 实现文件下载

应用场景

最近在项目中看到一种新的文件下载方式,原理是将[后台地址+接口地址+请求参数]拼接成一个url,直接将下载任务丢给浏览器去执行.但是在需要校验token的项目中,需要后台单独给这个接口放开token校验

location.href 相关内容

window.location.protocol: 返回当前 URL 的协议部分(例如:http: 或 https:)。
window.location.host: 返回当前 URL 的主机名和端口(例如:www.example.com:8080)。
window.location.hostname: 返回当前 URL 的主机名(例如:www.example.com)。
window.location.port: 返回当前 URL 的端口号(例如:8080)。
window.location.pathname: 返回当前 URL 的路径部分(例如:/path/to/page)。
window.location.search: 返回当前 URL 的查询字符串部分(例如:?key=value)。
window.location.hash: 返回当前 URL 的锚点部分(例如:#section1)。

代码

interface StringObject {[key: string]: string;
}const exportFile = async (params: StringObject = {}, url: string = '') => {try {const newUrl = (params: StringObject): String => {const urlParams = new URLSearchParams(params);// url是服务器地址+端口return `${window.location.protocol + "//"}${url}${'你的接口地址'}${urlParams}`;}window.location.href = newUrl()} catch (error) {console.log(error);}
};

URLSearchParams 对象

URLSearchParams 是 JavaScript 中用于处理 URL 查询字符串的一个内置对象

1.创建 URLSearchParams 实例

你可以通过传递一个查询字符串或者一个键值对数组来创建 URLSearchParams 实例。

// 使用查询字符串
const params1 = new URLSearchParams('?key1=value1&key2=value2');// 使用数组
const params2 = new URLSearchParams([['key1', 'value1'],['key2', 'value2']
]);

2.获取参数值

你可以通过 get 方法来获取单个参数的值,或者通过 getAll 方法来获取所有同名参数的值。

const params = new URLSearchParams('?key1=value1&key2=value2&key2=value3');console.log(params.get('key1')); // 输出: value1
console.log(params.getAll('key2')); // 输出: ['value2', 'value3']

3.设置参数值

你可以使用 set 方法来设置或更新参数的值,使用 append 方法来添加多个同名参数。

const params = new URLSearchParams();params.set('key1', 'value1');
params.append('key2', 'value2');
params.append('key2', 'value3');console.log(params.toString()); // 输出: key1=value1&key2=value2&key2=value3

4.删除参数

你可以使用 delete 方法来删除指定名称的参数。


const params = new URLSearchParams('?key1=value1&key2=value2');params.delete('key1');console.log(params.toString()); // 输出: key2=value2

5.与 URL 对象配合使用

URLSearchParams 通常与 URL 对象一起使用,以方便地处理 URL 及其查询参数。

const url = new URL('https://example.com/?key1=value1&key2=value2');
const params = url.searchParams;console.log(params.get('key1')); // 输出: value1params.set('key1', 'newvalue1');
params.append('key3', 'value3');console.log(url.href); // 输出: https://example.com/?key2=value2&key1=newvalue1&key3=value3

6.迭代参数

你可以通过 forEach 方法或者 [Symbol.iterator] 来迭代所有的键值对。

const params = new URLSearchParams('?key1=value1&key2=value2');params.forEach((value, key) => {console.log(`${key}: ${value}`);
});// 或者使用 for...of 循环
for (const [key, value] of params) {console.log(`${key}: ${value}`);
}

7.将参数转换为对象

有时你需要将 URLSearchParams 转换为普通的 JavaScript 对象。

const params = new URLSearchParams('?key1=value1&key2=value2');
const obj = {};for (const [key, value] of params) {obj[key] = value;
}console.log(obj); // 输出: { key1: 'value1', key2: 'value2' }

8.处理多个同名参数

当有多个同名参数时,URLSearchParams 可以很好地处理这些情况。

const params = new URLSearchParams('?key=value1&key=value2');console.log(params.getAll('key')); // 输出: ['value1', 'value2']

9.编码和解码

URLSearchParams 会自动处理参数的编码和解码。

const params = new URLSearchParams();params.append('name', 'John Doe');
params.append('tag', 'hello world');console.log(params.toString()); // 输出: name=John+Doe&tag=hello+world

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

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

相关文章

【前后端】HTTP网络传输协议

近期更新完毕,建议关注、收藏! http请求 URL 严格意义上应该是URI http or https http不加密不安全;https加密协议(公网使用) http端口号80 https端口号443GET or POST GET和POST是HTTP请求的两种基本方法. 因为POST需…

多线程 - 自旋锁

个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 多线程 - 自旋锁 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记,欢迎大家在评论区交流讨论💌 目录 概述 原理 优点与…

thinkphp5验证码captcha无法显示

排查思路 是否开启gd2以及gd2排查bom排查代码清除缓存 开启gd/gd2 找到php.ini 开启dg2库 去掉前面的;注释,有的可能会带.dll后缀影响不大 然后通过生成图片验证是否成功 查看是否存在bom 修改为utf-8即可,如果你的代码携带bom也需要排查一下 代码问…

Flutter组件————FloatingActionButton

FloatingActionButton 是Flutter中的一个组件,通常用于显示一个圆形的按钮,它悬浮在内容之上,旨在吸引用户的注意力,并代表屏幕上的主要动作。这种按钮是Material Design的一部分,通常放置在页面的右下角,但…

#{ }和${ } 、参数处理

目录 #{ }和${ } 参数处理 入参-parameterType 使用Map 使用Bean / List<Bean> 使用多参数 Param注解&#xff08;命名参数&#xff09; 出参-resultType 返回Map / List<Map> 返回Map<String,Map> 属性名不一致-resultMap结果映射 #{ }和${ }…

MySQL数据库——门诊管理系统数据库数据表

门诊系统数据库his 使用图形化工具或SQL语句在简明门诊管理系统数据库his中创建数据表&#xff0c;数据表结构见表2-3-9&#xff5e;表2-3-15所示。 表2-3-9 department&#xff08;科室信息表&#xff09; 字段名称 数据类型 长度 是否为空 说明 dep_ID int 否 科室…

Gin-vue-admin(4):项目创建前端一级页面和二级页面

目录 创建一级页面创建二级页面 创建一级页面 view目录下新建一个my&#xff0c;Index.vue <template></template><script> export default {name:My, } </script><script setup> import {ref} from vue const myNameref("name") &…

ABAP SQL 取日期+时间最新的一条数据

我们在系统对接的时候&#xff0c;外部系统可能会推送多个数据给到我们。 我们 SAP 系统的表数据中日期和时间是作为主键的&#xff0c;那么如果通过 ABAP SQL 取到最新日期的最新时间呢。 解决方案&#xff1a; 方式 1&#xff1a;SELECT MAX 可以通过两个 SELECT MAX 来取…

【面试 - 遇到的问题】Vue 里 router-view 使用 key + 关闭页面后重新打开页面-获取的数据赋值到旧组件问题(钩子执行顺序)

目录 【1】问题描述【2】问题排查前 - 页面渲染、tag 页签渲染 逻辑梳理页面渲染【借用别人的描述】<router-view :key"key" />1. 不设置key 属性2. 设置 key 属性值为 $route.path/page/1 > /page/2/page?id1 > /page?id2, 3. 设置 key 属性值为 $rou…

应该连续学一个科目,还是多学科切换?

https://www.zhihu.com/question/333420829https://www.zhihu.com/question/333420829

excel 使用vlook up找出两列中不同的内容

当使用 VLOOKUP 函数时&#xff0c;您可以将其用于比较两列的内容。假设您要比较 A 列和 B 列的内容&#xff0c;并将结果显示在 C 列&#xff0c;您可以在 C1 单元格中输入以下公式&#xff1a; 这个公式将在 B 列中的每个单元格中查找是否存在于 A 列中。如果在 A 列中找不到…

2024159读书笔记|《南山册页:齐白石果蔬册鱼虫册》节选

2024159读书笔记|《南山册页&#xff1a;齐白石果蔬册&鱼虫册》节选 1. 《南山册页&#xff1a;齐白石鱼虫册》2. 《南山册页&#xff1a;齐白石果蔬册》 1. 《南山册页&#xff1a;齐白石鱼虫册》 《南山册页&#xff1a;齐白石鱼虫册》南山书画&#xff0c;大家之作&…

【AI驱动的数据结构:包装类的艺术与科学】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 包装类装箱和拆箱阿里巴巴面试题 包装类 在Java中基本数据类型不是继承来自Object&#xff0c;为了…

Nginx 双向链表 ngx_queue_t

目录 一、基本概述 二、数据结构 三、接口描述与实现 1、相关宏接口 2、ngx_queue_middle 3、ngx_queue_sort 四、使用案例 整理自 nginx 1.9.2 源码 和 《深入理解 Nginx&#xff1a;模块开发与架构解析》 一、基本概述 双向链表的优势是可以快速进行数据插入、删除与…

亚信安全春节14天双倍假期通告

亚信安全14天双倍假期来袭 “网安福利王”再次实至名归 2024年 8773小时&#xff0c;31582680秒 亚信安全一直驰骋于云网安世界 奋战在“安全 数智化”的壮阔征途上 如今&#xff0c;新春的脚步渐近 长达14天的春节长假 能让我们暂且放下忙碌的工作 去除班味&#xff0c…

【时间之外】IT人求职和创业应知【71】-专利费

目录 2025 ICT产业趋势年会召开&#xff0c;2024年度ICT十大新闻重磅揭晓 海纳致远数字科技申请定制化插件驱动的数据分析专利 阿波罗智联取得语音数据的处理方法、装置、设备和存储介质专利 心勿贪&#xff0c;贵知足。 感谢所有打开这个页面的朋友。人生不如意&#xff0…

游戏《姆吉拉的假面》启动时提示“xinput1_3.dll丢失”怎么办?“xinput1_3.dll丢失”要怎么解决?

《姆吉拉的假面》报错&#xff1a;xinput1_3.dll丢失&#xff1f;这里有解决之道&#xff01; 在畅游《姆吉拉的假面》这款经典游戏时&#xff0c;你是否遇到过“xinput1_3.dll丢失”的报错信息&#xff1f;这个错误不仅会影响你的游戏体验&#xff0c;还可能让你陷入无法继续…

数据分析实战—鸢尾花数据分类

1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class&#xff08;种类&#xff09;项中的异常值&#xff0c;其他异常值也同时处理 。 import pandas as pd from sklearn.datasets import load_iris pd.set_option(display.max_columns, N…

hive注释comment中文乱码解决

问题描述 当使用以下命令查看表的元数据信息时出现中文乱码&#xff08;使用的是idea连接hive&#xff09; desc formatted test.t_archer; 解决 连接保存hive元数据的MySQL数据库&#xff0c;执行以下命令&#xff1a; use hive3; show tables;alter table hive3.COLUMNS_…

maven项目运行时NoSuchMethodError问题排查记录(依赖冲突解决)

控制台异常如下&#xff1a; Handler dispatch failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.io.input.BoundedInputStream.builder()Lorg/apache/commons/io/input/BoundedInputStream$Builder;问题明显&#xff0c;根据NoSuchMethodError…